design-infraReport a problem or share feedback← Catalog
Sliding Number
curatedtheme-awarefreemotion-primitives/sliding-number
A component that transitions between numbers with a sliding animation.
$
npx shadcn@latest add @motion-primitives/sliding-numbernpm deps: motion, react-use-measure
Our notes
Odometer-style rolling digits (spring). Inherits colour; pair with in-view for stats.- Source
- Motion Primitives
- Kind
- component
- Categories
- stats
- Use as
- drop-in — replaces your component
- Applies to
- stats
- Motion
- on state · subtle · motion · medium cost · ignores reduced motion
- Tags
- motion
- Licence
- MIT (ibelick/motion-primitives). Motion Primitives Pro is a separate paid product — not catalogued.
- Live demo
- motion-primitives.com
- Docs
- motion-primitives.com
Similar
Compare all 4 →- Rolling Numbercult-ui/rolling-numberSmall rolling-digit number (motion). Inherits colour.
- Number Tickermagicui/number-tickerCount-up number for stats sections. Hard-codes text-black dark:text-white — pass className="text-foreground" (or font-heading) to theme it.
- Animated Numbermotion-primitives/animated-numberA component that animates number changes with smooth transitions.