Data

StatTile

A single KPI — uppercase label, large light numeral, optional status dot.

Preview

components/data/StatTile.jsx

Active predictions

0 resolved — Brier pending

Integrity — red flags

10 invariants held

Ladder rungs fired

standing until acted

One KPI per tile, laid in an even grid. The dot carries state; the numeral stays monochrome.

Usage

src/components/ui/StatTile.tsx

tsx

import { StatTile } from "@/components/ui/StatTile";

<StatTile label="Active predictions" value={5} sub="0 resolved" />
<StatTile label="Integrity" value={0} sub="10 invariants held" tone="live" />

API

props

Prop	Type	Default	Description
label	ReactNode	—	Uppercase KPI label.
value	ReactNode	—	The number — large, Inter light. Never serif, never bold-black.
sub	ReactNode	—	Quiet context line under the value.
tone	"neutral" \| "live" \| "warn" \| "danger"	"neutral"	Status dot beside the value — state only, never data.

Tokens consumed

semantic only

--color-bg-elevated--color-border--color-fg--color-fg-subtle--signal-live--signal-warn--signal-danger--weight-light