Sliding Number

Odometer-style number transitions where each digit rolls independently to its new value. Numbers don't just change—they animate with satisfying spring physics, each digit cycling through intermediate values like a mechanical counter. Supports decimal places with configurable separators, scroll-triggered animations, and leading zero padding. Uses react-use-measure for precise digit sizing and Motion's useSpring for natural physics. Built with Motion for React. Perfect for dashboards, statistics displays, pricing animations, or anywhere numbers need to feel dynamic and alive.

Sliding Number preview

Installation

npx shadcn@latest add https://www.shadcn.io/registry/sliding-number.json

npx shadcn@latest add https://www.shadcn.io/registry/sliding-number.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/sliding-number.json

bunx shadcn@latest add https://www.shadcn.io/registry/sliding-number.json

Related Components

FAQ