design-infraRevenue
$48,210
12.4%increasevs. last month
Report a problem or share feedback← Catalog
Stat cards
curatedtheme-awarefreeoc/stat-cards
Dashboard KPI tiles: label, big value, delta chip (invertible for churn/latency) and an SVG sparkline in --chart-1.
drop-inTechnicalTrustworthy
$
npx shadcn@latest add @design-infra/stat-cardsnpm deps: lucide-react
Live demo — under each design system
brutalist-mono
Active users
8,904
3.2%increasevs. last month
Churn
2.1%
0.6%decreaselower is better
p95 latency
182ms
18.5%increasevs. last week
editorial
Revenue
$48,210
12.4%increasevs. last month
Active users
8,904
3.2%increasevs. last month
Churn
2.1%
0.6%decreaselower is better
p95 latency
182ms
18.5%increasevs. last week
linear-dark
Revenue
$48,210
12.4%increasevs. last month
Active users
8,904
3.2%increasevs. last month
Churn
2.1%
0.6%decreaselower is better
p95 latency
182ms
18.5%increasevs. last week
soft-glass
Revenue
$48,210
12.4%increasevs. last month
Active users
8,904
3.2%increasevs. last month
Churn
2.1%
0.6%decreaselower is better
p95 latency
182ms
18.5%increasevs. last week
- Source
- oc
- Kind
- block
- Categories
- stats, dashboard, card
- Use as
- drop-in — replaces your component
- Applies to
- statsdashboardcard
- Motion
- not tagged (static or unknown)
- Tags
- oc
- Live demo
- www.owencoonahan.xyz
Similar
Compare all 4 →- Template · SaaS dashboardoc/template-saas-dashboardStarter page → app/dashboard/page.tsx. Use existing compatible tokens, or install a theme only when requested; it pulls in 3 @oc blocks. Preview: /templates/template-saas-dashboard.
- Data table cardoc/data-table-cardshadcn table in a card with toolbar: search, faceted filter, actions slot, sortable columns, row selection and pagination. Badge columns are server-safe; `cell` renderers need a client page.
- Stats rowoc/stats-rowBig-number proof row ('99.99% uptime') with hairline dividers or cards. 2-4 stats.