display contract
KPI
Stat + sparkline + period selector. Card-sized; for the top of dashboards.
Variants
- default
- compact
Sizes
- md
- lg
Slots
- stat
- sparkline
- period
Example
<KPI title="Active users" value={users} period="7d" sparkline={data} />Usage rule
Sparkline shows the same period as the stat — never mismatch.
The full KPI contract has 2 more rules, plus the do-not patterns. Get the full recipe.