Layout & Display
KPI block with a label, value, trend delta pill, optional icon and sparkline, plus a responsive StatGroup.
| Prop | Type | Default | Description |
|---|---|---|---|
label | ReactNode | — | Required. |
value | ReactNode | — | Required. |
delta | ReactNode | — | Change indicator — shown as a coloured pill. |
icon | ReactNode | — | In a rounded tile, top-right. |
spark | ReactNode | — | A sparkline — pair with <Chart unstyled … />. |
help | ReactNode | — | Small helper line under the value. |
label
ReactNode
Default: —
Required.
value
ReactNode
Default: —
Required.
delta
ReactNode
Default: —
Change indicator — shown as a coloured pill.
icon
ReactNode
Default: —
In a rounded tile, top-right.
spark
ReactNode
Default: —
A sparkline — pair with <Chart unstyled … />.
help
ReactNode
Default: —
Small helper line under the value.
| Prop | Type | Default | Description |
|---|---|---|---|
trend | "up" | "down" | "flat" | — | Colour + arrow for delta. |
size | "sm" | "md" | "lg" | md | Value size. |
trend
"up" | "down" | "flat"
Default: —
Colour + arrow for delta.
size
"sm" | "md" | "lg"
Default: md
Value size.
| Prop | Type | Default | Description |
|---|---|---|---|
StatGroup columns | number | 4 | Responsive grid — collapses to 2 / 1 columns. |
StatGroup columns
number
Default: 4
Responsive grid — collapses to 2 / 1 columns.
