Data

StatCard

A KPI tile: an uppercase label, a serif number and an optional delta line. StatStrip is the hairline-separated row for a landing hero.

Examples

A metric grid

Repositories

+12% from last month

Total backups

1,240

+18% from last month

Storage used

12.6 GB

-6% from last month

Success rate

99.9%

Last 30 days

<div className="metric-grid metric-grid--four">
  <StatCard label="Repositories" value={42} delta={{ direction: "up", label: "+12% from last month" }} />
  <StatCard label="Total backups" value="1,240" delta={{ direction: "up", label: "+18% from last month" }} />
  <StatCard label="Storage used" value="12.6 GB" delta={{ direction: "down", label: "-6% from last month" }} />
  <StatCard label="Success rate" tone="success" value="99.9%" delta={{ label: "Last 30 days" }} />
</div>

StatStrip

175

Repositories tracked

Backup runs

99.7%

Success rate

1.0 GB

Archived so far

<StatStrip items={[
  { value: 175, label: "Repositories tracked" },
  { value: 29, label: "Backup runs" },
  { value: "99.7%", label: "Success rate" },
  { value: "1.0 GB", label: "Archived so far" },
]} />

Guidelines

Always in a metric grid: four across, two under 960px, one under 640px.
The value is a formatted string; the component does not format numbers. Tabular figures keep columns aligned.
Colour the value only when the number itself is a health signal (success rate, failed count).
No icons in a stat card, no coloured labels, no animated numbers.

Props

Prop	Type	What it does
label, value	ReactNode	The uppercase label and the serif number.
tone	"default" \| "success" \| "danger" \| "muted"	Colours the value.
delta	{ direction?: 'up' \| 'down' \| 'flat'; label: ReactNode }	The caption line under the value.
flat, compact	boolean	A tile inside a card; a shorter tile for dense grids.
items	{ value; label }[]	StatStrip only.