Metric Card
One number with its trend and, per variant, a sparkline, progress, breakdown, comparison, distribution, status, action or AI insight.
Usage
Installation
npm install @wunderui/reactThen import what you need:
import { MetricCard } from "@wunderui/react"Examples
Simple
Label, value and the trend chip — the card every dashboard starts with.
Icon
A 32 px tile before the label, the glyph via the icon prop.
Icon Button
The same slot as a bordered 32 px icon button; give it onIconClick to make it do something.
Menu
The ⋯ opens View details, Customize, Export data and Remove; onMenuSelect tells you which.
Header
Show icon puts a tile before the label, Show menu the ⋯ button: label only, icon + label, label + menu.
Trend
None, positive, negative or neutral — the Trend Chip decides the colour and the glyph.
Comparison · Period
The change against the last period, with the previous value spelled out.
Trend · Line
A sparkline under the value.
Trend · Area
The same series with a soft fill.
Trend · Bar
Mini bars, the latest one solid.
Trend · Area right
The area chart beside the value, on the baseline.
Trend · Bar right
Green bars beside the value, the current one solid.
Progress · Linear
A goal: the bar plus the target line.
Progress · Segmented
Milestones or budget steps as segments.
Progress · Radial
The ring sits beside the value.
Breakdown · Two rows
The total split in two.
Breakdown · List
More rows: plans, regions, top items.
Comparison · Bar
Two periods as two bars.
Distribution · Segments
A stacked bar with its legend.
Distribution · Donut
The donut beside the value, the legend below.
Status
A badge with a note — systems, projects, SLAs.
Action
A call to action under the number.
Insight · AI
A generated sentence on the indigo tint.
Avatars
Who is behind the number — teams, users, assignees.
In context
How the component is used inside real screens — the same compositions as the Usage section of the Figma page.
Dashboard KPI group
The same row as one Metric Group: four cards in one frame, divided by hairlines.
Dashboard KPI row
Four simple cards across the top of a dashboard.
Sales report header
Two report cards: the chart under the value, or beside it.
Billing usage card
Seats used against the plan, with settings and the report.
Mobile stack
On a phone the cards stack full width.