Stat Card
A compact metric tile displaying a labeled value with an optional icon, delta trend pill, and muted hint line.
Default
Total Users
12,480+8.3%
vs. last 30 days
Churn Rate
2.1%-0.4%
monthly average
Delta Directions
Revenue
$48,200+12.5%
vs. previous month
Avg. Session
4m 32s-0.8%
vs. previous month
Bounce Rate
38.0%0.0%
no change
Grid Dashboard
Overview
Active Users
8,340+5.2%
last 24 h
Requests / s
2,104+1.8%
p95 latency 42 ms
Error Rate
0.04%+0.01%
last 1 h window
DB Queries
182K-3.4%
cache hit 94%
Servers Online
24 / 24
all regions healthy
Uptime
99.99%0.0%
rolling 30 days
No Delta
Uptime
99.98%
last 90 days
Regions
12
active datacenters
Build #
4,021
current pipeline
Rich Value
Monthly Revenue
$84,312+9.1%
USD, excl. taxes
Tasks Complete
142/ 160
88% done this sprint
Incident Status
Resolved
last updated 3 min ago
With Icons
Page Views
1.24M+18.2%
last 7 days
Orders
3,892+4.1%
last 7 days
Avg. Rating
4.7+0.2
from 1,240 reviews
Growth Rate
22.8%+3.5%
month-over-month
Installation
npx shadcn@latest add @byronwade/stat-cardProps
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | Short text label shown above the value. |
| value | React.ReactNode | — | The primary metric value displayed prominently. |
| hint | React.ReactNode | undefined | Optional muted helper text shown below the value. |
| delta | { value: string; direction: 'up' | 'down' | 'flat' } | undefined | Optional trend pill showing directional change alongside the value. |
| icon | LucideIcon | undefined | Optional Lucide icon rendered in the top-right corner of the card. |
| className | string | undefined | Additional CSS classes merged onto the card root element. |