Metric

Data Display

A label, value, and optional delta for dashboards and detail pages.

Metric is the stat-card content without the card. It is useful when you want several numbers laid out in a row of their own.

npx shadcn@latest add metric

Default

A small label over a tabular-numeral value with an optional unit.

Preview

Live

Uptime

99.99%

Response time

128ms-18 ms

Error rate

0.42%+0.12%

tsx

1<Metric label="Uptime" value="99.99" unit="%" />
2<Metric label="Response time" value="128" unit="ms" delta="-18 ms" />
3<Metric label="Error rate" value="0.42" unit="%" delta="+0.12%" />

With description

Add a single sentence of context below the value.

Preview

Live

Monthly active users

42,801+8.4%

Across web, iOS, and Android.

tsx

1<Metric
2  label="Monthly active users"
3  value="42,801"
4  delta="+8.4%"
5  description="Across web, iOS, and Android."
6/>

API reference

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
label	string	The metric label.
value	string	The primary value.
unit	string	Optional unit rendered after the value.
delta	string	Optional change text; green when it starts with a plus, red when minus.
description	string	Optional supporting sentence.