Skip to content

Dashboards and KPIs (Desktop)

Desktop packData display

Desktop KPI rows, widget cards, date range pickers, top-N lists, dashboard homes and empty states with vector charts.

components
10
variants
35
recreations
5
themes
5

Also for mobile: Dashboards and KPIs

What’s inside

Ten dashboard patterns for web apps: KPI stat rows, a date range picker with compare, widget cards, top-N lists, mini tables, a widget grid with a customise mode, a dashboard home, a report header and an empty dashboard. Charts are editable vectors, and deltas keep direction and sentiment separate, so a rise in refunds reads as bad news.

  • Editable vector charts: lines, areas, bars, donuts, sparklines
  • Deltas with arrow, sign and words, never colour alone
  • 5 recreations of real product dashboards
  • KPI row, every variant

    KPI row

    Free sample

    4 variants

  • Date range picker

    4 variants

  • Widget card, every variant

    Widget card

    5 variants

  • Top-N list, every variant

    Top-N list

    6 variants

  • Mini table, every variant

    Mini table

    3 variants

  • Widget grid, every variant

    Widget grid

    2 variants

  • Customise dashboard, every variant

    Customise dashboard

    3 variants

  • Dashboard home, every variant

    Dashboard home

    2 variants

  • Report header, every variant

    Report header

    3 variants

  • Empty dashboard, every variant

    Empty dashboard

    3 variants

Figma file
SuperDuper Pack: Dashboards and KPIs (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 2 screen patterns
Home and Charts & dashboard

How Stripe Dashboard, Shopify admin and Vercel 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 home, every variant

    Payments home

    Recreated from Stripe Dashboard

  • Commerce analytics, every variant

    Commerce analytics

    Recreated from Shopify admin

  • Hosting overview, every variant

    Hosting overview

    Recreated from Vercel

  • Product analytics, every variant

    Product analytics

    Recreated from PostHog

  • Email marketing, every variant

    Email marketing

    Recreated from Klaviyo

Not affiliated with, endorsed or sponsored by Stripe Dashboard, Shopify admin, Vercel, PostHog and Klaviyo. Their names are trade marks of their owners and are used only to say what each recreation is based on.

KPI row, every variant

See the kpi row full size, free

A row of KPI tiles with sparklines and deltas that show direction and sentiment separately. All 4 variants, free to see with a SuperDuperUI account. The Figma file comes with the pack.

  • Charts and data viz

    Desktop13 components54 variants4 recreations

    Desktop line, bar, donut, heatmap, funnel, scatter and gauge charts drawn as vectors, with legends, tooltips and states.

    $9, or included with Pro

  • 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 dashboards and kpis pack

  • One Figma file: SuperDuper Pack: Dashboards and KPIs (Desktop). It has 10 components with 35 variants, 5 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.