Stat Tile

StatTile is a numeric-forward KPI tile: a label, a large value, and an optional trend line. Pass change (a percentage number) to render a signed, color-coded trend — up is accent, down is destructive, flat is muted. Leave change null to show a plain changeLabel (e.g. a ratio). Optional icon and sparkline snippets slot into the header and footer. Built on Card.

A row of metrics

value is preformatted — the tile never decides how money or a percentage should read. The sign on change drives the trend icon and its colour, and changeLabel says what the delta is against; a percentage with nothing to compare to is a number nobody can act on.

Revenue

$24,800

+12.4% vs last week

Orders

312

-3.1% vs last week

Refund rate

1.8%

Steady for 3 weeks

<div class="grid w-full gap-4 sm:grid-cols-3">
	<StatTile label="Revenue" value="$24,800" change={12.4} changeLabel="vs last week" />
	<StatTile label="Orders" value="312" change={-3.1} changeLabel="vs last week" />
	<StatTile label="Refund rate" value="1.8%" changeLabel="Steady for 3 weeks" />
</div>

With an icon and a sparkline

The icon sits top-right, muted and sized down, as a label for the metric rather than decoration. The sparkline snippet goes under the trend row — shape to go with the number, where the trend percentage alone would say nothing about how it got there.

Revenue

$24,800

+12.4% vs last week

New customers

+4.2% vs last week

<div class="grid w-full gap-4 sm:grid-cols-2">
	<StatTile label="Revenue" value="$24,800" change={12.4} changeLabel="vs last week">
		{#snippet icon()}
			<TrendingUp />
		{/snippet}
		{#snippet sparkline()}
			<Sparkline data={REVENUE} x="date" y="value" height={40} />
		{/snippet}
	</StatTile>

	<StatTile label="New customers" value="86" change={4.2} changeLabel="vs last week">
		{#snippet icon()}
			<Users />
		{/snippet}
	</StatTile>
</div>

A single figure

Omit change and the trend row disappears rather than showing a zero — a delta of nothing and a delta nobody measured are different things, and only one of them is worth a line.

Open carts

1,204

API

Prop	Type	Default	Description
`label` required	`string`		Metric name shown above the value.
`value` required	`string\|number`		Preformatted metric value.
`change`	`number`	`null`	Percentage delta. Sign drives the trend icon and color. Null hides the trend row.
`changeLabel`	`string`	`''`	Context after the percentage (e.g. "vs last month"), or standalone when `change` is null.
`icon`	`import('svelte').Snippet`		Icon rendered top-right, muted and sized down automatically.
`sparkline`	`import('svelte').Snippet`		Content rendered below the trend row, e.g. a mini chart.
`class`	`string`		Extra Tailwind classes merged onto the Card.