display contract
Stat
Single big number with an optional label and trend.
Variants
- default
- Number + label
- trend
- Number + label + delta arrow + percentage
Sizes
- sm
- title3 20/25 number
- md
- title2 22/28
- lg
- title1 28/34
- xl
- largeTitle 34/41 — hero stats
Slots
- value
- Big number
- label
- Description below the value
- trend
- Optional delta indicator
Example
<Stat value={revenue} label="Monthly revenue" trend={{ value: 0.08 }} />Usage rule
Format numbers with Intl.NumberFormat — locale-aware grouping.
The full Stat contract has 3 more rules, plus the do-not patterns. Get the full recipe.