Trend Tile

A KPI tile with a full-bleed sparkline along the bottom - the same label / mono figure / delta as a StatTile, plus an at-a-glance trend. Reach for it when the shape of a series matters as much as its latest value. This is a net-new component that doesn't exist elsewhere in the library.

Examples

Trend tiles in chatLoading state

How are the top-line metrics trending?

All three top-line metrics are moving the right way:

ARR

$312M

+18.6%

Net new logos

1,240

+6.2%

Churn

4.1%

−0.6%

Props

Prop	Type	Default	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 next to the delta.
`data`	`number[]`	-	The spark series, oldest → newest.
`seriesIndex`	`1 \| 2 \| 3 \| 4 \| 5`	`1`	Which chart color paints the spark.

tsx

<TrendTile
  label="ARR"
  value="$312M"
  delta={<Delta value={18.6} />}
  data={[120, 138, 141, 160, 172, 190, 205, 228]}
  seriesIndex={1}
/>

Agent context

Use TrendTile when a metric benefits from an at-a-glance trend. Pass the series as data (oldest → newest) and pick seriesIndex for the spark color (1 = green). It sits in a StatGrid alongside StatTiles.

PreviousChart Card

NextCite