Stat
Label/value metric readout with optional delta.
MISSION ID
0427+12
UPTIME
99.98%+0.02%
THROUGHPUT
1,284REQ/S
P95 LATENCY
212ms-38ms
Source
"use client"
import { Stat } from "@/registry/warren/stat/stat"
export default function StatDemo() {
return (
<div className="flex flex-wrap items-start gap-6 rounded-none border-2 border-border bg-panel p-3">
<Stat label="MISSION ID" value="0427" delta="+12" />
<Stat label="UPTIME" value="99.98%" delta="+0.02%" />
<Stat label="THROUGHPUT" value="1,284" delta="REQ/S" />
<Stat label="P95 LATENCY" value="212ms" delta="-38ms" />
</div>
)
}
Installation
npx shadcn@latest add https://warren.eduard3v.com/r/stat.jsonUsage
import { Stat } from "@/components/ui/stat"<Stat label="P95 LATENCY" value="212ms" delta="-38ms" />Tones
default · primary · success · danger · warning · accent · teal
Signal-colored values always use the text-grade tokens (AA on cream); the saturated tone is reserved for fills, dots, and borders elsewhere.
TOTAL
12,480
ROUTED
9,104
ACCEPTED
8,233
REJECTED
871
QUEUED
412
ASSIGNED
5,120
RECOVERED
1,106
Source
"use client"
import { Stat } from "@/registry/warren/stat/stat"
export default function StatTones() {
return (
<div className="flex flex-wrap items-start gap-6 rounded-none border-2 border-border bg-panel p-3">
<Stat label="TOTAL" value="12,480" tone="default" />
<Stat label="ROUTED" value="9,104" tone="primary" />
<Stat label="ACCEPTED" value="8,233" tone="success" />
<Stat label="REJECTED" value="871" tone="danger" />
<Stat label="QUEUED" value="412" tone="warning" />
<Stat label="ASSIGNED" value="5,120" tone="accent" />
<Stat label="RECOVERED" value="1,106" tone="teal" />
</div>
)
}
Sizes
sm · md · lg
SM
128+4
MD
128+4
LG
128+4
Source
"use client"
import { Stat } from "@/registry/warren/stat/stat"
export default function StatSizes() {
return (
<div className="flex flex-wrap items-end gap-6 rounded-none border-2 border-border bg-panel p-3">
<Stat label="SM" value="128" size="sm" delta="+4" />
<Stat label="MD" value="128" size="md" delta="+4" />
<Stat label="LG" value="128" size="lg" delta="+4" />
</div>
)
}
Delta and onDark
Pass delta to render a trailing 10px mono annotation next to the value. On dark fills (the
inverted navy band), pass onDark so label and value flip to the light grade.
The value is always mono with tabular-nums — numerals align column-to-column in every size,
with no way to opt out.
API Reference
Prop
Type