Primitive

Stat

KPI number lockup for dense dashboards.

Stats are scan targets. Keep labels short, pair deltas sparingly, and use display scale only for editorial emphasis.
data
DOM renderImage render
StatDefault
Runs14.8k18.6% last 7d

Playground

Controls update query params directly, so every primitive state can be linked, rendered, and screenshotted deterministically.

Loading playground

Rendered matrix

Every state maps to the same primitive render route through the state query param.

Default

Dashboard stat lockup.
Runs14.8k18.6% last 7d
Render state

Numeric

Standalone numeric treatment.
184ms
0.04
Render state

Display

Editorial display treatment.
98.2
42%
Render state

Intents

Stat intent treatments for dashboard hierarchy.
Accepted64%
Reviewed22%
Blocked5%
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
labelReactNode-Optional metric label for lockups.
value *ReactNode-Large numeric value.
unitReactNode-Baseline unit suffix.
purpose'lockup' | 'numeric' | 'display'lockupDashboard or editorial numeric treatment.
density'micro' | 'compact' | 'comfortable' | 'editorial' | 'display'comfortableNumeric rhythm.
intent'neutral' | 'muted' | 'sky'neutralNumeric semantic intent.
deltaReactNode-Optional Delta slot.
metaReactNode-Optional muted suffix.