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

A KPI row in chatLoading state

How did the quarter look?

Strong quarter overall - here are the headline numbers:

Revenue

$4.51B

+12.4%vs. FY23

Gross margin

61.2%

+2.1%+210 bps

Op. costs

$1.76B

+8.3%vs. FY23

FCF

$820M

0.0%flat YoY

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.

tsx

<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.

PreviousOverview

NextMetric Row