Stat Card
A versatile statistics card with icon, title, main/secondary stats, metrics grid, and extensible footer slot. Includes loading skeleton states and compound components for custom layouts.
Installation
$ npx shadcn@latest add @orecus/stat-cardDependencies:
lucide-reactmotion
Registry:
skeleton@orecus/color-utils@orecus/card@orecus/header@orecus/use-reduced-motion@orecus/use-animated-number
Component
Full-featured stat cards with metrics, secondary stats, and animations.
With metrics grid
Revenue Overview
Monthly performance metrics
Total Revenue
vs Last Month
Customers
Growth
Orders
With accent styling
Analytics
Page Views
This Week
With footer
Sales Dashboard
Premium glass card with glow
Total Orders
Uptime
Rating
Footer content (e.g., sparkline chart)
Inverted style
Conversion Rate
Last 30 days performance
Conversion Rate
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title* | string | — | Title text for the card header |
icon* | LucideIcon | — | Icon component to display in the header |
description | ReactNode | — | Description text below the title |
mainStat* | StatValue | — | Main statistic with value, label, and optional color |
secondaryStat | StatValue | — | Optional secondary statistic displayed on the right |
metrics | StatMetric[] | — | Array of metrics with icon, value, label, and color |
metricsColumns | number | 3 | Number of columns for the metrics grid (1-4) |
action | ReactNode | — | Optional action content in the header (e.g., button) |
footer | ReactNode | — | Optional footer content (e.g., sparkline, progress bar) |
cardProps | CardProps | — | Props to pass to the Card wrapper (type, hoverEffect, accentColor, etc.) |
animated | boolean | true | Whether to animate elements on mount |
animateValue | boolean | true | Whether to animate numeric values with a counting effect |
compact | boolean | false | Compact layout variant |
loading | boolean | false | Shows skeleton loading state when true |
className | string | — | Additional CSS classes for the card |