design-infraReport a problem or share feedback← Catalog
Number Animation Digit Swap
freebeui/digit-swap
Fixed-slot digits and mask glyphs that roll on change with controllable direction, stagger, replay, and suffix emphasis.
$
npx shadcn@latest add @beui/digit-swapnpm deps: clsx, motion, tailwind-merge
- Source
- beUI (free)
- Kind
- component
- Categories
- stats
- Use as
- drop-in — replaces your component
- Applies to
- stats
- Motion
- on state, enter · subtle · motion · medium cost
- Tags
- react, tailwind-v4, motion, motion
- Licence
- MIT — Copyright (c) 2026 Saurabh Chauhan; retain the upstream notice when copying source.
- Live demo
- beui.dev
- Docs
- beui.dev
Similar
Compare all 4 →- 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.
- Rolling Numbercult-ui/rolling-numberSmall rolling-digit number (motion). Inherits colour.
- Number Animation Animated Numberbeui/animated-numberSpring-driven count-up triggered when in view.