Components
StatCard
Single KPI tile with value, trend delta, and an optional sparkline.
StatCard is a self-contained KPI tile: a label, a prominent value, and an
optional delta whose sign drives the up/down colour and arrow (with a
deltaLabel caption like "vs last month"). Add an icon, a muted hint, or a
sparkline array for an inline trend. Drop several into a grid to build a
dashboard summary row.
Example
Preview
MRR
$24.8k
+12.4%vs last month
Active users
1,284
+4.1%vs last week
Churn
2.3%
-0.8%vs last month
import { StatCard } from '@officina/ui';
<StatCard
label="MRR"
value="$24.8k"
delta={12.4}
deltaLabel="vs last month"
sparkline={[12, 18, 14, 22, 28, 34, 42]}
/>;API
| Prop | Type | Default | Description |
|---|---|---|---|
| label* | string | — | Metric name shown above the value. |
| value* | string | number | — | Primary metric value. |
| delta | number | — | Percentage change; sign drives the up/down colour and arrow. |
| deltaLabel | string | — | Caption beside the delta (e.g. "vs last month"). |
| hint | string | — | Muted helper text under the value. |
| icon | ReactNode | — | Leading icon. |
| sparkline | number[] | — | Series rendered as an inline trend sparkline. |