Count Up

Component

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>
  );
}