Count Up

Text 153

About

An animated number counter that springs to its target value when it enters the viewport, with support for decimals, thousands separators, count direction, and per-digit slide, fade, and blur effects.

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

"use client";

import { CountUp } from "@/components/ui/count-up";

export default function CountUpDemo() {
  return (
    <div className="flex min-h-64 flex-wrap items-end justify-center gap-12 bg-background p-8 text-foreground">
      <div className="flex flex-col items-center gap-1">
        <CountUp
          to={1000000}
          separator=","
          digitEffect="slide"
          className="text-5xl font-bold tabular-nums tracking-tight"
        />
        <span className="text-xs text-muted-foreground">users</span>
      </div>

      <div className="flex flex-col items-center gap-1">
        <CountUp
          to={99.9}
          digitEffect="blur"
          className="text-5xl font-bold tabular-nums tracking-tight"
        />
        <span className="text-xs text-muted-foreground">uptime %</span>
      </div>

      <div className="flex flex-col items-center gap-1">
        <CountUp
          to={0}
          from={5}
          direction="down"
          separator=","
          digitEffect="slide"
          className="text-5xl font-bold tabular-nums tracking-tight"
        />
        <span className="text-xs text-muted-foreground">issues</span>
      </div>
    </div>
  );
}