Stats Sections - TypeScript UI

Stats sections turn key numbers into compelling social proof. These components help you highlight growth, scale, and performance metrics in a clear, scannable format.

Component Variants

Stats Simple

Companies using our platform: 8,000+
Uptime guarantee: 99.99%
API requests per day: 250M+
Countries served: 40+

Stats With Description

Trusted by teams around the world

From early-stage startups to Fortune 500 companies, teams rely on our platform to ship faster and scale with confidence.

Active teams: 12k
Average rating: 4.9/5
Customer satisfaction: 99.9%
Support availability: 24/7

Stats Cards

48,320
Total users: 18
Global regions: 99.98%
Server uptime: 2
Incidents this month

Stats Animated (scroll into view)

Companies: 0+
API calls per day: 0M+
Uptime: 0.9%
Countries: 0+

Usage

import {
  StatsSimple,
  StatsWithDescription,
  StatsCards,
  StatsAnimated,
} from '@/components/ui/stats';

// Simple row of stats
<StatsSimple
  stats={[
    { value: '8,000+', label: 'Companies using our platform' },
    { value: '99.99%', label: 'Uptime guarantee' },
  ]}
/>

// Heading + description with stats grid
<StatsWithDescription
  heading="Trusted by teams around the world"
  description="From startups to Fortune 500 companies."
  stats={[
    { value: '12k', label: 'Active teams' },
    { value: '4.9/5', label: 'Average rating' },
  ]}
/>

// Cards with icon and trend indicator
<StatsCards
  columns={4} // 2 | 3 | 4
  stats={[
    {
      label: 'Total users',
      value: '48,320',
      icon: <UsersIcon />,
      trend: { direction: 'up', value: '12.4%' },
    },
  ]}
/>

// Count-up animation on scroll into view
<StatsAnimated
  duration={2000}
  stats={[
    { value: 8000, suffix: '+', label: 'Companies' },
    { value: 99, suffix: '.9%', label: 'Uptime' },
  ]}
/>

Props Reference

StatsSimple

Prop	Type	Default	Description
`stats`	`Stat[]`	Required	Array of stat values and labels

Stat

Prop	Type	Description
`value`	`string`	Display value (e.g. `'8,000+'`)
`label`	`string`	Description of the stat

StatsWithDescription

Prop	Type	Default	Description
`heading`	`string`	Required	Section heading
`description`	`string`	Required	Supporting description text
`stats`	`Stat[]`	Required	Array of stat values and labels

StatsCards

Prop	Type	Default	Description
`stats`	`StatCardItem[]`	Required	Array of stat cards
`columns`	`2 \| 3 \| 4`	`4`	Number of grid columns

StatCardItem

Prop	Type	Description
`label`	`string`	Description of the stat
`value`	`string`	Display value
`icon`	`ReactNode`	Optional icon shown in the card
`trend`	`{ direction: 'up' \| 'down'; value: string }`	Optional trend indicator

StatsAnimated

Prop	Type	Default	Description
`stats`	`AnimatedStat[]`	Required	Array of stats to count up
`duration`	`number`	`2000`	Animation duration in milliseconds

AnimatedStat

Prop	Type	Description
`value`	`number`	Target numeric value
`label`	`string`	Description of the stat
`prefix`	`string`	Optional text before the number
`suffix`	`string`	Optional text after the number

Reduced motion

StatsAnimated checks prefers-reduced-motion and, when enabled, renders the target value immediately instead of counting up.