Statistic
Ready
Display numeric values with formatting, trends, and optional animations
Basic Statistics
Simple number displays with titles
Total Users
1,234
Active Sessions
892
Revenue
$45,678.90
Growth Rate
23.5%
With Trends
Show trend direction and change values
Monthly Revenue
$125,000
+15.3% from last month
Bounce Rate
42.8%
-5.2% from last week
Conversion
3.2%
No change
Sizes
Different size variants for various contexts
Small
1,234
Medium (default)
1,234
Large
1,234
Statistic Cards
Statistics wrapped in cards with icons
Total Users
12,847
+12.5%
Revenue
$84,230
+23.1%
Orders
1,423
-4.3%
Page Views
89,234
+8.7%
Card Variants
Different background color variants
Default
100
Primary
200
Success
300
Warning
400
Danger
500
Count Up Animation
Animated counter that counts up to a value
Revenue
$0
Users
0
Growth
0.0%
Loading State
Skeleton placeholder while loading
Features
Built-in functionality
- Number formatting - Automatic thousand separators and decimal precision
- Prefix/Suffix - Currency symbols, units, percentages
- Trend indicators - Up, down, or neutral with values
- Three sizes - Small, medium, and large variants
- StatisticCard - Card wrapper with icon and color variants
- CountUp - Animated counting animation
- Loading state - Skeleton placeholder
- Custom formatter - Override default number formatting
Usage
Basic implementation examples
import { Statistic, StatisticCard, CountUp } from '@/components/ui/statistic'
// Basic statistic
<Statistic title="Total Users" value={1234} />
// With formatting
<Statistic
title="Revenue"
value={45678.90}
prefix="$"
precision={2}
trend="up"
trendValue="+12.5%"
/>
// Statistic card with icon
<StatisticCard
title="Total Revenue"
value={125000}
prefix="$"
icon={<DollarSign />}
variant="success"
trend="up"
trendValue="+15.3%"
/>
// Animated counter
<CountUp end={1000} duration={2000} prefix="$" />API Reference
Statistic component props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | string | - | Value to display (required) |
| title | string | - | Label text |
| prefix | ReactNode | - | Prefix element |
| suffix | ReactNode | - | Suffix element |
| precision | number | - | Decimal places |
| trend | 'up' | 'down' | 'neutral' | - | Trend direction |
| trendValue | string | - | Trend change text |
| size | 'sm' | 'md' | 'lg' | 'md' | Size variant |
| loading | boolean | false | Show loading skeleton |