Stat
Hero example
When to use
Stat is the canonical big-number column used in 2-up or 3-up rows inside
a card. It's the right primitive for SHARES / STRIKE / FAIR VALUE clusters,
KPIs, formation-summary tiles, and any single scalar that wants a kicker
caption above and a small mono caption below.
For tabular rows where labels and values share the row (Jurisdiction: DE),
reach for KVRow instead. For grids of key-value tiles, KVGrid.
gap: 24 for the canonical cluster.Anatomy
A KICKER line (11px mono, --text-tertiary), a display value (22px default or 28px when emphasis="display", tabular-nums), and an optional caption (11px mono, --text-tertiary).
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| kickerrequired | React.ReactNode | — | — |
| valuerequired | React.ReactNode | — | — |
| caption | React.ReactNode | — | — |
| variant | "default" | "display" | — | Visual variant. `display` renders the value at display-card size (28px); `default` renders at the 22px stat size. |
| emphasis | "default" | "display" | — | @deprecated Use `variant` instead. `emphasis` is retained for backward compatibility and maps 1:1 to the same value set. When both are set, `variant` wins. |
| className | string | — | — |
In Dynamic Cards
This primitive's type is "Stat". The assistant composes it inside a
Row to build stat clusters. The canonical option-grant exemplar in the
Dynamic Cards gallery is a
worked example: three Stats wrapped in a Row produce the
SHARES / STRIKE / FAIR VALUE moment from the screenshot.
{
"type": "Row",
"gap": 24,
"children": [
{ "type": "Stat", "kicker": "SHARES", "value": "30,000" },
{ "type": "Stat", "kicker": "STRIKE", "value": "$0.18", "caption": "409A · May 2026" },
{ "type": "Stat", "kicker": "FAIR VALUE", "value": "$5,400" }
]
}