Stat
KPI readouts for the top of a dashboard or a report header. A large tabular figure with a quiet label above and optional supporting text after. StatStrip lays a row of Stats out with hairline dividers between them.
Stat
Active users
1,284+31%
<Stat label="Active users" value="1,284" hint="+31%" icon={<Users className="size-4" />} />StatStrip
Active users
1,284+31%
Avg response
120msOn target
Uptime
99.9%
<StatStrip> <Stat label="Active users" value="1,284" hint="+31%" icon={<Users className="size-4" />} /> <Stat label="Avg response" value="120ms" hint="On target" icon={<Clock className="size-4" />} /> <Stat label="Uptime" value="99.9%" icon={<Activity className="size-4" />} /></StatStrip>Props
| Prop | Type | Default | Notes |
|---|---|---|---|
label | ReactNode | — | Quiet caption above the value. |
value | ReactNode | — | The large tabular figure. |
hint | ReactNode | — | Supporting text or delta after the value. |
icon | ReactNode | — | Leading icon, ~16px. |