Animated counter

Free

A number that counts to its value, with prefix, suffix and locale.

Installs components/ui/animated-counter.tsxDepends on none beyond ReactMotion honours reduced motion

pnpm dlx shadcn@latest add https://caliperui.site/r/animated-counter.json

Customers12,840+

When to use #

Use it for

Hero figures that should feel alive when they appear.
Values that update in place.

Skip it when

Numbers that change often; the motion becomes noise.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/animated-counter.json

Adds its 3 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx

import { AnimatedCounter } from "@/components/ui/animated-counter"

export function CustomerCount() {
  return (
    <p className="text-4xl font-semibold">
      <AnimatedCounter value={12840} label="Customers" suffix="+" />
    </p>
  );
}

API reference #