Library

Stats Section

Stats Section

Animated statistics section with spring-based number counting and staggered entrance. Available in row (divider separated) or grid layout.

statsnumberscountersection

Installation

bash
# Copy stats-section.tsx to your project
cp components/ui/stats-section.tsx your-project/components/ui/stats-section.tsx

How to use

tsx
import { StatsSection } from "@/components/ui/stats-section";
tsx
<StatsSection
  heading="Trusted by thousands"
  stats={[
    { value: 10000, suffix: "+", label: "Users" },
    { value: 99.9, suffix: "%", decimals: 1, label: "Uptime" },
    { value: 150, suffix: "+", label: "Countries" },
  ]}
/>

Dependencies

framer-motion

Exports

StatsSection

File

components/ui/stats-section.tsx
Preview

Trusted by teams worldwide

Numbers that speak for themselves

0+
Active Users
Growing 20% month over month
0%
Uptime
Enterprise-grade reliability
$0M
Saved Monthly
Average customer savings
0+
Countries
Global reach
Made with