Components/Metric Card

Metric Card

A richer KPI card for dashboards: label, value, percentage delta, inline sparkline, and a status accent. A drop-in upgrade over the plain Stat when you need a trend chart at-a-glance.

Monthly revenue

$48,294

12.4%vs last month

Installation

npx ajaxui add metric-card

Accents

The accent prop adds a subtle ring + status dot. Use it to convey health (success / warning / danger) without changing layout.

Active users

12,540

4.2%

Uptime

99.98%

0.1%

API latency

312 ms

5.6%

Error rate

2.4%

8.1%

Without sparkline

Omit sparkline for a compact card — perfect for sidebars or dense 4-column grids.

MRR

$48k

12.4%

Customers

2,108

3.6%

Churn

1.2%

0.4%

Loading

Set loading to render skeletons while data is in flight. Layout stays stable.

Monthly revenue

Props

Prop	Type	Default	Description
label	string	—	Short caption shown above the value.
value	ReactNode	—	The headline figure (pre-formatted string or node).
change	number	—	Percentage delta. Sign drives trend direction.
changeLabel	string	—	Caption next to the delta (e.g. "vs last month").
trend	"up" \| "down" \| "neutral"	auto	Override the trend computed from change.
sparkline	number[]	—	Series rendered inline. 8–24 points works best.
icon	ReactNode	—	Top-right icon slot.
accent	"default" \| "success" \| "warning" \| "danger" \| "info"	"default"	Adds a colored ring and status dot.
footer	ReactNode	—	Optional footer slot (links, actions).
loading	boolean	false	Renders a skeleton in place of value/sparkline.

Accessibility

Each card renders as an <article> with an accessible name derived from label.
The delta is announced as e.g. "up 12.4 percent vs last month", not just the arrow glyph.
The sparkline is purely decorative (aria-hidden) — the value text remains the source of truth.