Typography

Rolling Number

Animated number counter for React and shadcn/ui that rolls to new values with a Motion spring and custom formatting.

Updated Oct 1, 2026

Custom Spring Properties

1,000

Mass: 1

Stiffness: 100

Damping: 40

Precision

14.57

Format

$10.00

Callbacks

Rolling Number is a React component for shadcn/ui animated with a Motion spring. Use it for dashboard metrics, counters, prices, or live stats that change over time.

Installation


pnpm dlx shadcn@latest add @cult-ui/rolling-number

Usage


function BasicExample() {
  const [value, setValue] = useState(1000);
 
  return (
    <div>
      <RollingNumber value={value} />
      <Button
        size="sm"
        variant="ghost"
        className="border border-primary/10 rounded-full "
        onClick={() => setValue(value + 1000)}
      >
        <Plus className="h-4 w-4" />
      </Button>
    </div>
  );
}