Statistic
Data Display
Dashboard
Display numerical statistics with optional formatting, prefixes, suffixes, and animated counting.
Preview
Statistics with animated counting
Active Users
8,249
Tasks Completed
1,847
Avg. Time
24min
Growth
18.5%
Statistic Cards
Statistics wrapped in card containers
Total Revenue
$145,678
Active Sessions
2,847
Conversion Rate
3.24%
Animated Counting
Use CountUp for animated number transitions
Users
0
Revenue
$0
Growth
0.0%
Rating
0.0
Sizes
Different size options
Small
1,234
Medium
1,234
Large
1,234
Props
Component API reference
Statistic
| Prop | Type | Default | Description |
|---|---|---|---|
title* | string | — | Stat title/label |
value* | number | — | Numeric value |
prefix | ReactNode | — | Content before value (icon or text) |
suffix | ReactNode | — | Content after value (unit or symbol) |
size | 'sm' | 'md' | 'lg' | 'md' | Size variant |
className | string | — | Additional CSS classes |
StatisticCard
| Prop | Type | Default | Description |
|---|---|---|---|
title* | string | — | Stat title |
value* | number | — | Numeric value |
prefix | ReactNode | — | Content before value |
suffix | ReactNode | — | Content after value |
icon | ReactNode | — | Icon to display |
variant | 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'default' | Color variant |
className | string | — | Additional CSS classes |
CountUp
| Prop | Type | Default | Description |
|---|---|---|---|
end* | number | — | Target number to count to |
start | number | 0 | Starting number |
duration | number | 2000 | Animation duration in ms |
decimals | number | 0 | Number of decimal places |
Usage
Import and implementation examples
import { Statistic, StatisticCard, CountUp } from '@/components/ui/statistic'
import { Users, TrendingUp } from 'lucide-react'
// Basic statistic
<Statistic
title="Active Users"
value={8249}
/>
// With prefix icon
<Statistic
title="Growth"
value={18.5}
prefix={<TrendingUp className="w-4 h-4" />}
suffix="%"
/>
// Statistic card with icon and variant
<StatisticCard
title="Total Revenue"
value={145678}
prefix="$"
variant="success"
/>
// Animated counting
<CountUp end={12847} duration={2000} />
<CountUp end={24.5} decimals={1} duration={2000} />Features
Built-in functionality
- 3 size variants: Small, medium, and large sizes
- Prefix & suffix: Add icons, symbols, or units
- CountUp animation: Animated number counting on mount
- StatisticCard: Card wrapper with description support
- Number formatting: Automatic locale-aware formatting
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
Uses semantic structure for title and valueAnimated values have final value in DOMIcons are decorative with aria-hiddenKeyboard Navigation
| Key | Action |
|---|---|
| N/A | Statistic is not interactive |
Notes
- Screen readers announce title and value together
- Animation duration respects prefers-reduced-motion
- Clear visual hierarchy maintained