Stat Tile
The house KPI tile: a muted label, a large mono figure, and an optional change indicator with a context line. Lay tiles out in a StatGrid for the standard metric row, and pair each figure with a Delta and a Cite.
Examples
Strong quarter overall - here are the headline numbers:
Revenue
$4.51B
Gross margin
61.2%
Op. costs
$1.76B
FCF
$820M
StatTile
| Prop | Type | Description |
|---|---|---|
label | ReactNode | Muted caption above the figure. |
value | ReactNode | The headline figure. Put a <Cite> inside it when sourced. |
delta | ReactNode | Optional change indicator, typically a <Delta>. |
sub | ReactNode | Optional context line (e.g. "vs. FY23"). |
StatGrid
Responsive grid for tiles. columns (2–4) sets the count at the widest breakpoint; it always collapses to two columns on narrow widths.
<StatGrid columns={4}>
<StatTile label="Revenue" value="$4.51B" delta={<Delta value={12.4} />} sub="FY24" />
{/* … */}
</StatGrid>Delta
A signed change indicator: a directional triangle plus a formatted magnitude, aligned with tabular-nums. The arrow and sign follow the value - positive points up and is green, negative points down and is red. Pass tone to override the color when the sign doesn't map to good/bad (e.g. a rising cost or a falling churn rate), and format to control the label.
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | - | The signed change; its sign drives the arrow and sign. |
tone | "positive" | "negative" | "neutral" | derived | Override the color independent of the sign. |
flatThreshold | number | 0 | Magnitude at or below which the change reads as flat. |
format | (value: number) => string | signed % | Format the magnitude. |
hideArrow | boolean | false | Hide the triangle. |
Agent context
Use StatTile for a single headline number and StatGrid to lay several out. label is a muted caption, value is the large mono figure (put a <Cite> inside it when sourced), and delta takes a <Delta>. For cost-like metrics where an increase is bad, set tone on the Delta so the color matches the meaning.