Dashboards and KPIs
Desktop10 components35 variants5 recreations
Desktop KPI rows, widget cards, date range pickers, top-N lists, dashboard homes and empty states with vector charts.
$9, or included with Pro
Charts and data viz (Desktop)
Desktop packData display
Desktop line, bar, donut, heatmap, funnel, scatter and gauge charts drawn as vectors, with legends, tooltips and states.
- components
- 13
- variants
- 54
- recreations
- 4
- themes
- 5
Also for mobile: Charts and data viz
What’s inside
Thirteen desktop chart sets, from line, area and bar charts to donuts, sparklines, heatmaps, funnels, scatter plots and gauges, plus chart cards, legends, tooltips, loading and empty states and a table fallback. Every series has its own marker, dash and pattern and a direct label, so charts read without colour. Each page documents use, anatomy, keyboard and screen reader behaviour.
- Series told apart by marker, dash and pattern, not colour alone
- Loading, empty, error and partial data states, plus a table view
- Recreations of Stripe, Vercel, PostHog and Plausible dashboards
Line chart
Free sample6 variants
- Line
- Area
- Default
- Hover
- Focus
Bar chart
4 variants
- Grouped
- Stacked
- Default
- Hover
Donut chart
4 variants
- Donut
- Half
- Default
- Hover
Sparkline
6 variants
- Line
- Area
- Bar
- Up
- Down
Heatmap
4 variants
- Grid
- Calendar
- Default
- Hover
Funnel
4 variants
- Horizontal
- Vertical
- Default
- Hover
Scatter plot
4 variants
- Scatter
- Bubble
- Default
- Hover
Gauge and meter
6 variants
- Gauge
- Bullet
- Low
- On target
- Full
Chart card
4 variants
- Period
- Period and menu
- Chart
- Chart and table
Legend
3 variants
- Row
- Column with values
- Interactive
Tooltip on chart
2 variants
- Hover
- Keyboard focus
Chart state
4 variants
- Loading
- Empty
- Error
- Partial data
Table fallback
3 variants
- Chart
- Chart and table
- Table only
- Figma file
- SuperDuper Pack: Charts and data viz (Desktop)
- Themes
- Light, Dark, Light high contrast, Dark high contrast and Wireframe
- Densities
- Comfortable and Compact
- Also in the file
- Usage and accessibility notes, motion specs, Figma variables
- Covers 1 UI element
- Chart
How Stripe Dashboard, Vercel Web Analytics and PostHog and others do it
Recreations of real products, so you can compare approaches side by side. They are approximate, built from public product knowledge, with placeholder data and no third-party artwork.
Payments overview
Recreated from Stripe Dashboard
Web analytics
Recreated from Vercel Web Analytics
Product analytics
Recreated from PostHog
Privacy analytics
Recreated from Plausible
Not affiliated with, endorsed or sponsored by Stripe Dashboard, Vercel Web Analytics, PostHog and Plausible. Their names are trade marks of their owners and are used only to say what each recreation is based on.
See the line chart full size, free
Line and area charts with direct series labels, in default, hover and focus states. All 6 variants, free to see with a SuperDuperUI account. The Figma file comes with the pack.
More data display packs
Cards, tiles and carousels
Desktop13 components67 variants4 recreations
Desktop cards and tiles: media, callout, selectable, expandable, kanban, template, checklist, integration and carousels.
$9, or included with Pro
Avatars, images and placeholders
Desktop10 components80 variants2 recreations
Desktop avatars, stacks, presence, thumbnails, galleries, a lightbox and image frames, with editable placeholder art.
$9, or included with Pro
Questions about the charts and data viz pack
One Figma file: SuperDuper Pack: Charts and data viz (Desktop). It has 13 components with 54 variants, 4 recreations, and notes on when to use each part. Everything uses Figma variables, so you can change the colours and type to match your product.