Components / Data Display
Stat Card
stableA single summary metric — used in rows of 3–5 at the top of a dashboard or data table.
Default
$84,920.50
Total revenue
12.4%
1,204
Active users
3.1%
6
Open tickets
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
label | string | — | Yes | What the number measures. |
value | string | — | Yes | The formatted metric value. |
icon | ReactNode | — | No | Optional semantic icon. |
trend | { direction: "up" | "down"; value: string } | — | No | Optional trend indicator. |
Do
- Pair each stat with a semantic icon that reinforces what it measures.
- Show a trend only when the comparison period is unambiguous (e.g. "vs last 30 days" is stated somewhere nearby).
Don't
- Show more than 5 stat cards in one row — group into a second row or a details page instead.
- Use a trend arrow without a value next to it.