Data display

IStat

A single headline number with its movement, built for a row of tiles across the top of a dashboard.

Revenue€48,290 +18.4%vs. last quarter

Invoices sent312 +4.1%vs. last quarter

Days to payment21 -6.2%vs. last quarter

The delta sits on its own line, so a row of tiles keeps its lines aligned however long each value is.

Trend

The sign of delta decides the direction, and zero is neutral.

Up1,204 +12.5%

Flat1,204 0%

Down1,204 -8.1%

Override it with trend when a rising number is bad news — days to payment, error rate, churn.

Days to payment34 +9.4%rising is worse

Overdue balance€3,940 -22%falling is better

formatDelta receives the raw number, for when a percentage is the wrong unit.

New clients18 +5 this month

Revenue€48,290 +€7,400

Small€48,290 +18.4%

Medium€48,290 +18.4%

Large€48,290 +18.4%

Prop	Type	Default	Description
`label`	`string`	—	What the number measures
`value`	`string \| number`	—	The headline figure
`delta`	`number`	—	Change since the comparison period
`trend`	`'up' \| 'down' \| 'neutral'`	from `delta`	Overrides which direction reads as good
`hint`	`string`	—	Names the comparison, e.g. "vs. last quarter"
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Overall scale
`formatDelta`	`(delta: number) => string`	percentage	Formats the delta text
`as`	`string`	`'div'`	Element to render
`unstyled`	`boolean`	—	Drop built-in classes
`class`	`string`	—	Merged with the built-in classes
`ui`	`{ root?, label?, value?, delta?, hint?, row? }`	—	Per-slot class overrides

Colour is carried by the delta text rather than a filled surface, and the arrow beside it is decorative — the sign already says which way it went.

Slot	When to use it
`label` / `hint`	Either needs markup
`delta`	Full control of the change line, receiving `{ trend }`

Pair one with ISparkline when the shape of the change matters as much as its size.