StatCard

A single number worth looking at — the unit of a dashboard's top row.

The value is rendered tabular so a column of them stays aligned as they update. Give it delta and it grows the second half of the story: the change since last period, as an arrow and a percentage, tinted by whether that change is good. Good is not the same as up — an error rate falling is the win — so goodDirection says which way is which, and the arrow carries the meaning alongside the colour rather than instead of it. Give it trend and a Sparkline fills the space under the number, which is the cheapest way to say whether the delta is a wobble or a slope.

Layout

<script lang="ts">
	import { StatCard } from '@l4st/driftwood';
</script>

Light	Dark

Props

Prop	Type	Default	What it does
label required	string	—	What the number is.
value required	string	—	The number itself, already formatted — this does no rounding.
icon	Component	—	A lucide component, rendered muted beside the label.
delta	number	—	Change since the previous period, as a fraction: 0.128 renders "+12.8%".
deltaLabel	string	—	Names the period the delta covers, e.g. "vs last week".
goodDirection	'up' | 'down' | 'none'	'up'	Which direction is the good one. 'none' tints the delta muted instead.
trend	(number | null)[]	—	Recent values, drawn as a Sparkline under the number.
class	string	—	Merged with the component's own classes, last — so yours win.

Example

The markup behind the screenshot above, lifted from src/routes/shots/ — so it compiles, and it is exactly what produced the image.

<StatCard label="Volumes" value="4" icon={HardDrive} />
<StatCard
	label="Indexed files"
	value="2.56M"
	delta={0.128}
	deltaLabel="vs last week"
	trend={[1.9, 2.0, 1.98, 2.2, 2.3, 2.44, 2.56]}
/>
<StatCard
	label="Failed reads"
	value="19"
	delta={-0.42}
	deltaLabel="vs last week"
	goodDirection="down"
	trend={[41, 38, 36, 30, 27, 22, 19]}
/>

Layout · Card · Accordion · AccordionItem · Collapsible · Separator · Table · Scroller

---

← All components · Getting started · Theming · source