About
A number that animates up (or down) to a target value the first time it scrolls into view, formatted with locale-aware grouping and decimals, for stats and totals on a landing page.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Count Up to your project and fits it to your theme.
Code
How Count Up is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import CountUp from "@/components/ui/count-up";
export default function CountUpDemo() {
return (
<div className="flex w-full max-w-xl flex-col items-center justify-center gap-10 p-10">
<p className="text-center text-lg text-foreground">
<span className="text-4xl font-bold">
<CountUp value={1113} />
</span>{" "}
models, <CountUp value={56} /> makes.
</p>
<div className="grid w-full grid-cols-2 gap-8 text-center">
<div>
<div className="text-4xl font-bold text-foreground">
<CountUp value={4681} />
</div>
<div className="mt-1 text-sm text-muted-foreground">
Happy customers
</div>
</div>
<div>
<div className="text-4xl font-bold text-foreground">
CHF <CountUp value={0.52} decimals={2} duration={2000} /> / km
</div>
<div className="mt-1 text-sm text-muted-foreground">
Average delivery cost
</div>
</div>
</div>
</div>
);
}
More by zweiundeins
View all
Theme Switch
11
Busy
9
ECharts
1
Sparkline
Drawer
Starfield
Odometer
Meter