Stat tile
A KPI tile: an eyebrow label, a big stencil value, and an optional sub line tinted by trend. Presentational — renders server-side with no client JS.
Orders today
1,284
+12% vs yesterday
Error rate
0.4%
-0.2pt
MRR
$48k
flat
import StatTile from '@repo/ui/StatTile';
<StatTile label="Orders today" value="1,284" sub="+12% vs yesterday" trend="up" />| Prop | Type | Notes |
|---|---|---|
label | string | Eyebrow (uppercase, tracked) |
value | ReactNode | Big value, set in the stencil display face |
sub | ReactNode | Optional sub line |
trend | up | down | flat | Tints the sub line (success / error / muted) |
Do / don’t
Section titled “Do / don’t”- Do keep values short and scannable; this is a glance, not a table.
- Don’t rely on trend color alone — keep the direction in the
subtext (+12%,-0.2pt).