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.

Runs14.8k18.6% last 7d

Playground

Props in the URL.

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

Loading playground.

States

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

Runs14.8k18.6% last 7d

Default

Dashboard stat lockup.

184ms

0.04

Numeric

Standalone numeric treatment.

98.2

42%

Display

Editorial display treatment.

Props

Name	Type	Default	Description
`label`	`ReactNode`	-	Optional metric label for lockups.
`value *`	`ReactNode`	-	Large numeric value.
`unit`	`ReactNode`	-	Baseline unit suffix.
`variant`	`'lockup' \| 'numeric' \| 'display'`	`lockup`	Dashboard or editorial numeric treatment.
`size`	`'xsmall' \| 'small' \| 'medium' \| 'large' \| 'xlarge'`	`medium`	Numeric scale.
`tone`	`'default' \| 'muted' \| 'sky'`	`default`	Numeric color treatment.
`delta`	`ReactNode`	-	Optional Delta slot.
`meta`	`ReactNode`	-	Optional muted suffix.