Stat Card

Data Display

A compact KPI card that surfaces a metric alongside an optional trend.

StatCard frames a single number in a Card. Provide a delta and trend to show whether the metric moved up or down.

npx shadcn@latest add stat-card

Default

Title and value with an optional prefix or suffix unit.

Preview

Live

Requests

1,284

Latency

42ms

Sessions

9,741

tsx

1<StatCard title="Requests" value="1,284" />
2<StatCard title="Latency" value="42" suffix="ms" />
3<StatCard title="Sessions" value="9,741" />

With trend and icon

Deltas render in emerald or red with a trending icon.

Preview

Live

Revenue

$48,120

12.5%vs last period

Active users

8,204

3.2%vs last period

Churn rate

1.8%

0.4%vs last period

tsx

1<StatCard
2  title="Revenue"
3  value="48,120"
4  prefix="$"
5  delta="12.5%"
6  trend="up"
7  icon={DollarSign}
8/>
9<StatCard
10  title="Churn rate"
11  value="1.8"
12  suffix="%"
13  delta="0.4%"
14  trend="down"
15  icon={Activity}
16/>

API reference

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

Prop	Type	Description
title	string	The metric label.
value	string	The displayed value.
delta	string	Optional change text rendered below the value.
trend	"up" \| "down"= "up"	Direction of the delta; controls the icon and color.
icon	LucideIcon	Optional icon shown in the header.
prefix	string	Optional text rendered before the value.
suffix	string	Optional text rendered after the value.