Back to components
Animation component
Animated Counter
Number stat that counts up from 0 to a target value when scrolled into view.
Install
$ Run in your project root
pnpm dlx shadcn@latest add https://vibekit.desishub.com/r/animated-counter.jsonWhat it does
- Counts up only after scrolling into view (useInView)
- Configurable duration, prefix, and suffix
- Locale-formatted numbers (12,345 not 12345)
- Single span — drops into any layout
When to use
Use it
Marketing stat bands, dashboards highlighting milestone numbers, About / Press sections.
Skip it
Live counters that change after the initial reveal — use a state-driven number instead.
Prerequisites
- framer-motion (installed automatically)