Getting Started
Templates
Components
Blocks
A scroll-triggered stats section featuring animated number counters powered by NumberFlow. Numbers animate into view when the section enters the viewport, creating an engaging way to showcase key metrics.
Key Features:
import { StatsCounter } from "@/components/ui/stats-counter"
export default function Example() {
return (
<StatsCounter
title="Trusted by teams worldwide"
subtitle="By the numbers"
stats={[
{ value: 90, suffix: "+", label: "Integrations", delay: 800 },
{ value: 56, suffix: "%", label: "Productivity Boost", delay: 1000 },
{ value: 12, suffix: "K+", label: "Active Teams", delay: 1200 },
{ value: 99.9, suffix: "%", label: "Uptime SLA", delay: 1400 },
]}
/>
)
}| Prop | Type | Default | Description |
|---|---|---|---|
stats | StatsCounterStat[] | 4 default stats | Array of stat objects to display |
title | string | "Trusted by teams worldwide" | Section heading text |
subtitle | string | "By the numbers" | Small uppercase text above title |
description | string | Default description | Text below the stats grid |
className | string | undefined | Additional CSS classes |
Each stat in the stats array accepts:
interface StatsCounterStat {
value: number // The number to animate to
suffix?: string // Text after the number (e.g., "+", "%", "K+")
label: string // Description below the number
delay?: number // Animation duration in ms (default: 1000)
}<StatsCounter
stats={[
{ value: 500, suffix: "M+", label: "Downloads", delay: 600 },
{ value: 4.9, label: "App Store Rating", delay: 800 },
{ value: 150, suffix: "+", label: "Countries", delay: 1000 },
{ value: 24, suffix: "/7", label: "Support", delay: 1200 },
]}
/><StatsCounter
title="Our Impact"
subtitle="Growth metrics"
description=""
/>