StatCard

A metric with its comparison and a textual trend, without installing a chart library.

Monthly revenue

$48,210

+12.4%vs. August

Active users

2,318

0%vs. August

p95 latency

182 ms

−38 msvs. last week

Installation

Run it from the root of a project already set up with zunoui init.

$ npx zunoui@latest add stat-card

Dependencies

What add stat-card installs alongside the component. The CLI skips any you already have in a compatible version.

ZUNO registry

@zuno/utils
@zuno/card

Examples

2 examples · 1 component

Monthly revenue

$48,210

+12.4%vs. August

Active users

2,318

0%vs. August

p95 latency

182 ms

−38 msvs. last week

Metrics row

Three cards in a ResponsiveGrid; latency going down is good news.

Open incidents

+2since yesterday

With header icon

StatCardHeader pairs the label with a decorative icon; the footer can hold plain context.

API reference

Forwards props and ref to the container element; it only adds composition utilities.

Prop	Type	Default
`StatCard` The surface; all Card props. Lay several out with ResponsiveGrid.	`Card`	—
`StatCardHeader` Optional row for the label plus an icon or a small action.	`div`	—
`StatCardLabel` What the number measures.	`p`	—
`StatCardValue` The formatted value, with tabular figures. Format it yourself (Intl.NumberFormat) so locale and currency are explicit.	`p`	—
`StatCardFooter` Trend and comparison period, wrapping on narrow cards.	`div`	—
`StatCardTrend` The change, with a decorative arrow.	`span`	—
`direction` Which way the number moved; picks the arrow.	`"up" \| "down" \| "flat"`	—
`sentiment` Whether the move is good news; picks the color. Set it when down is good (errors, churn, latency).	`"positive" \| "negative" \| "neutral"`	`from direction`

States

The states that apply to this component and their visual treatment.

State	Treatment
Up / positive	direction="up": up arrow in success color.
Down / negative	direction="down": down arrow in error color.
Down / positive	direction="down" sentiment="positive" for metrics where less is better.
Flat	direction="flat": a dash in muted color.

Accessibility

Read order is label, value, then trend: the card makes sense read top to bottom without the visual layout.

The arrow is aria-hidden and color only reinforces; the trend text must carry the change with its sign ("+12.4%", "−38 ms") and the footer names the comparison period.

Direction and sentiment are separate, so "errors went down" is not painted red.

Server-safe: no client JavaScript; no chart is required to show a metric.