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.
- Billable
- $61,400
- Non-billable
- $23,850
Breakdown · List
More rows: plans, regions, top items.
- Enterprise
- $41,200
- Growth
- $24,800
- Starter
- $12,650
- Add-ons
- $6,600
Comparison · Bar
Two periods as two bars.
Distribution · Segments
A stacked bar with its legend.
- Direct 46%
- Organic 28%
- Referral 16%
- Other 10%
Distribution · Donut
The donut beside the value, the legend below.
- Direct 46%
- Organic 28%
- Referral 16%
- Other 10%
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.
Up 12% on last month, driven by enterprise upgrades. Renewals are on track.
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.
API Reference
| Prop | Type | Default |
|---|---|---|
| label | string | — |
| value | string | — |
| icon | ReactNode | — |
| iconVariant | "tile" | "button" | "tile" |
| onIconClick | () => void | — |
| info | ReactNode | — |
| menu | boolean | ReactNode | — |
| onMenuSelect | (action: "view" | "customize" | "export" | "remove") => void | — |
| trend | { value; direction?: "up" | "down" | "neutral"; icon? } | — |
| caption | ReactNode | — |
| previous | ReactNode | — |
| aside | ReactNode | — |
| asideAlign | "center" | "end" | "end" for a MetricSparkline, else "center" |
| children | ReactNode | — |