Stat Card
Data Display
Dashboard
Display key metrics with icons, trends, and visual emphasis.
Preview
Dashboard stats overview
Total Users
12,345+12.5%
Active Tasks
847+5.2%
Completed
1,234+8.1%
Success Rate
94.2%-2.3%
Sizes
Different size options
Small
Page Views
45,678
Medium (Default)
Downloads
2,890
Large
Active Sessions
1,456
Trend Indicators
Show positive or negative trends
Revenue
$24,500+18.2%
Bounce Rate
32.4%-4.5%
Mini Stats
Compact inline statistics
Users
12.3k
Revenue
$45.2k
Orders
1,234
Conversion
3.2%
Props
Component API reference
StatCard
| Prop | Type | Default | Description |
|---|---|---|---|
label* | string | — | Stat label text |
value* | string | number | — | Stat value to display |
icon | ReactNode | — | Icon element |
trend | { value: number, label?: string } | — | Trend indicator (positive values show up, negative show down) |
trendFormat | 'percentage' | 'absolute' | 'percentage' | Format for trend display |
size | 'sm' | 'md' | 'lg' | 'md' | Size variant |
description | string | — | Optional subtitle text |
footer | ReactNode | — | Optional footer content |
className | string | — | Additional CSS classes |
MiniStat
| Prop | Type | Default | Description |
|---|---|---|---|
label* | string | — | Stat label |
value* | string | number | — | Stat value |
className | string | — | Additional CSS classes |
Usage
Import and implementation examples
import { StatCard, MiniStat } from '@/components/ui/stat-card'
import { Users, TrendingUp } from 'lucide-react'
// Basic stat card
<StatCard
label="Total Users"
value="12,345"
icon={<Users className="w-5 h-5" />}
/>
// With positive trend
<StatCard
label="Revenue"
value="$24,500"
icon={<TrendingUp className="w-5 h-5" />}
trend={{ value: 18.2 }}
/>
// With negative trend (use negative value)
<StatCard
label="Bounce Rate"
value="32.4%"
trend={{ value: -4.5 }}
/>
// Different sizes
<StatCard label="Stats" value="100" size="sm" />
<StatCard label="Stats" value="100" size="lg" />
// Mini stat for compact displays
<MiniStat label="Users" value="12.3k" />Features
Built-in functionality
- 3 sizes: Small, medium, and large variants
- Trend indicators: Show positive/negative trends with arrows
- Icon support: Optional icon with styled container
- MiniStat component: Compact inline stat display
- Responsive grid: Designed for dashboard grid layouts
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
Uses semantic structure for stat label and valueIcons are decorative with aria-hiddenTrend direction communicated via textKeyboard Navigation
| Key | Action |
|---|---|
| N/A | StatCard is not interactive by default |
Notes
- Clear visual hierarchy with label and value
- Color is not the only indicator of trend direction
- Screen readers announce label and value together