Overview
The StatsSection leverages our internal AnimatedCounter component to build the quintessential metric display block seen on every modern SaaS and agency landing page. It features automatic, scroll-triggered count-up animations, staggered delays, and optional icon slots.
Installation
npm install framer-motion lucide-react
Usage
import { StatsSection } from "@/components/creative/stats-section"
import { Users, Code, Zap } from "lucide-react"
export default function Metrics() {
const stats = [
{
value: 1.2,
label: "Active Users",
suffix: "M+",
decimals: 1,
icon: <Users />
},
{
value: 50,
label: "Integrations",
prefix: "",
icon: <Code />
},
{
value: 99.9,
label: "Uptime",
suffix: "%",
decimals: 1,
icon: <Zap />
}
]
return (
<section className="py-20 bg-black">
<StatsSection stats={stats} layout="row" />
</section>
)
}
Usage Guide
1. Import the Component
Import the component into your React or Next.js page:
import { StatsSection } from "@/components/creative/stats-section";
2. Implementation Example
Render the component and customize its behavior by passing props:
import { StatsSection } from "@/components/creative/stats-section";
export default function Example() {
return (
<div className="w-full flex items-center justify-center p-8">
<StatsSection
stats{/* value */}
layout{/* value */}
/>
</div>
);
}