Stat
Metric card displaying a key number with an optional trend indicator. Designed to be used in grids on dashboards and overview pages.
Examples
Total revenue
$45,231
20.1%vs last month
Negative trend
Bounce rate
54.2%
3.4%vs last month
With icon
Active users
2,350
12.5%vs last week
Grid
Revenue
$45,231
20.1%vs last month
Orders
1,284
2.3%vs last month
Active users
2,350
12.5%vs last week
Churn rate
3.2%
0.8%vs last month
Props
label*
string
Metric label shown above the value.
value*
ReactNode
The primary metric value.
change
number
Percentage change. Positive renders green (up), negative renders red (down).
changeLabel
string
Context for the change, e.g. "vs last month".
icon
ReactNode
Icon displayed top-right.
className
string
Additional classes.
| Prop | Type | Default | Description |
|---|---|---|---|
| label* | string | — | Metric label shown above the value. |
| value* | ReactNode | — | The primary metric value. |
| change | number | — | Percentage change. Positive renders green (up), negative renders red (down). |
| changeLabel | string | — | Context for the change, e.g. "vs last month". |
| icon | ReactNode | — | Icon displayed top-right. |
| className | string | — | Additional classes. |