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