Stat
A labelled value block — muted label over a value, an honest faint empty state, and an optional delta line. Two scales.
- Status
- Since
0.3.0- Accessibility pattern
- label and value pair
Last updated
Install
Add Stat from the VegaStack registry. The CLI verifies the item's integrity hash before writing it.
pnpm dlx shadcn@latest add @vegastack/statUsage
import {
Stat,
StatDelta,
StatEmpty,
StatLabel,
StatValue,
} from "@/components/ui/stat";
<Stat>
<StatLabel>Estimated ARR</StatLabel>
<StatValue>$1M–$10M</StatValue>
</Stat>;Dashboard tiles
size="lg" scales the value to the type-scale cap (24px, tabular) for stat tiles; add a
StatDelta with intent="up" | "down" | "flat" — the sign/arrow in the copy carries the
meaning, color is never the only signal.
Honest empties
When there is no value, render StatEmpty ("No connection", "No team") in the faint
placeholder register — never a dash or a zero that would read as data. This mirrors the
system-wide inline-empty tier (EmptyValue).
Anatomy
Stat is a compound component. Every exported part, with the
data-slot it renders (generated from the canonical source):
Examples
The default scale suits record highlights; the tile preview exercises the large value scale and all three delta intents.
API Reference
Stat
| Prop | Type | Default | Description |
|---|---|---|---|
size | "lg" | "md" | 'md' | Scale — default for facts/highlights rows, lg for dashboard tiles. |
Data attributes and CSS variables on Stat
| Attribute | Values |
|---|---|
data-size | mirrors a prop or state value |
data-slot | "stat" |
StatLabel, StatValue, and StatEmpty
These structural parts accept native <div> props and forward their refs to their respective
elements.
StatDelta
| Prop | Type | Default | Description |
|---|---|---|---|
intent | "down" | "flat" | "up" | 'flat' | Direction of the change — up reads success, down reads destructive,
flat stays muted. Pair the copy with a sign/arrow; color is never the
only signal. |
Data attributes and CSS variables on StatDelta
| Attribute | Values |
|---|---|
data-intent | mirrors a prop or state value |
data-slot | "stat-delta" |
Accessibility
- Keep the label visible so the value has an adjacent human-readable name.
- Delta copy carries direction with words or a sign; color is supplementary.
- Use
StatEmptyfor missing data instead of a dash or a misleading numeric zero. - Tabular numerals keep changing values aligned without changing their spoken representation.
| Contract | States tested |
|---|---|
| Behaviour | default, empty, error, success |
| Accessibility | native-or-base-ui-semantics, browser-accessibility-test |
| Visual | default, error, success, empty |