Count Up

An animated number that counts from a starting value to a target when scrolled into view — essential for metrics and stats sections.

UniqueUI CLI

npx uniqueui add count-up

shadcn CLI

npx shadcn@latest add https://uniqueui.com/r/count-up.json -y

shadcn path expects @/lib/utils (run shadcn init first). Same source file is installed to components/ui/.

Preview

GitHub Stars

0.0%

Uptime SLA

0 components

Ready to use

Developers

Usage

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

export default function Stats() {
  return (
    <div className="flex gap-12">
      <div className="text-center">
        <p className="text-5xl font-black text-white">
          <CountUp to={12400} suffix="+" duration={2.5} />
        </p>
        <p className="text-neutral-400 mt-1">Stars on GitHub</p>
      </div>
      <div className="text-center">
        <p className="text-5xl font-black text-white">
          <CountUp to={99.9} decimals={1} suffix="%" duration={2} />
        </p>
        <p className="text-neutral-400 mt-1">Uptime SLA</p>
      </div>
    </div>
  );
}

Props

Prop	Type	Description
`to`	`number`	Target (end) value.
`from`	`number`	Starting value.
`duration`	`number`	Animation duration in seconds.
`decimals`	`number`	Number of decimal places.
`prefix`	`string`	Prepended string, e.g. "$".
`suffix`	`string`	Appended string, e.g. "k+".
`separator`	`string`	Thousands separator. Pass empty string to disable.
`once`	`boolean`	Only animate on first scroll-enter.
`className`	`string`	Extra Tailwind classes.
`theme`	`"light" \| "dark"`	Theme context.