design-infraReport a problem or share feedback← Catalog
Number Ticker
curatedfreemagicui/number-ticker
Animate numbers to count up or down to a target number
$
npx shadcn@latest add @magicui/number-tickernpm deps: motion
Our notes
Count-up number for stats sections. Hard-codes text-black dark:text-white — pass className="text-foreground" (or font-heading) to theme it.- Source
- Magic UI
- Kind
- component
- Categories
- stats
- Use as
- drop-in — replaces your component
- Applies to
- stats
- Motion
- on enter, state · subtle · motion · medium cost · ignores reduced motion
- Tags
- motion
- Licence
- MIT (magicuidesign/magicui). Magic UI Pro templates are a separate paid product — not catalogued.
- Live demo
- magicui.design
- Docs
- magicui.design
Similar
Compare all 4 →- Rolling Numbercult-ui/rolling-numberSmall rolling-digit number (motion). Inherits colour.
- Number Animation Animated Numberbeui/animated-numberSpring-driven count-up triggered when in view.
- Number Animation Digit Swapbeui/digit-swapFixed-slot digits and mask glyphs that roll on change with controllable direction, stagger, replay, and suffix emphasis.