Stat tile

A KPI tile: an eyebrow label, a big stencil value, an optional leading icon chip, and an optional sub line tinted by trend. Presentational — renders server-side with no client JS.

Live

Orders today

1,284

+12% vs yesterday

Error rate

0.4%

-0.2pt

MRR

$48k

flat

Usage

import StatTile from '@repo/ui/StatTile';

<StatTile label="Orders today" value="1,284" sub="+12% vs yesterday" trend="up" />

Prop	Type	Default	Notes
label	string	—	Eyebrow (uppercase, tracked)
value	ReactNode	—	Big value, set in the stencil display face by default
sub	ReactNode	—	Optional sub line
trend	up | down | flat	—	Tints the sub line (success / error / muted)
icon	ReactNode	—	Optional leading icon rendered in a tinted chip in the top-right corner
iconTone	orange | success | info | warning | error | neutral | accent	neutral	Color tone for the icon chip
plain	boolean	false	Render value in sans bold face instead of the stencil display font
valueId	string	—	Optional id on the value element for imperative updates
className	string	—	Merged onto the card wrapper

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 sub text (+12%, -0.2pt).