Metric Card

A KPI tile — label, big value and a percent delta whose sign picks the trend colour and glyph.

tsx

1import { MetricCard } from "@pestoui/core"

Deltas

A positive delta reads success, a negative one reads destructive, and zero stays muted.

Conversations

12,480

+12.4%vs last week

Failed runs

-8.1%vs last week

Active agents

0%vs last week

Pass any node to icon and it renders inside a soft squircle IconTile beside the label.

Team seats

+5.2%

Messages handled

9,102

+21%

Avg. response

1.8s

-14.3%

align="center" stacks the icon over the label — use it for a short row of headline numbers.

Runs today

1,204

+3.6%

New workspaces

-2.4%

Prop	Type	Default	Description
label	ReactNode	—	What the number measures.
value	string \| number	—	The headline figure.
delta	number	—	Percent change. Its sign picks the trend colour and glyph; omit it to hide the delta row.
deltaLabel	ReactNode	—	Muted text beside the delta, e.g. “vs last week”.
icon	ReactNode	—	Rendered inside a leading soft IconTile.
chart	ReactNode	—	Slot for a sparkline or small chart, shown in a second card row.
align	"start" \| "center"	"start"	Text and icon alignment inside the card.

Pesto UI · 117 documented components