Command Palette

Search for a command to run...

Components/Animations/Animated Counter

Animated Counter

Animationsinline sandbox

A number counter that animates from 0 to the target value using GSAP. Great for statistics and metrics.

animated counter
odometer counter
number counter
react counter component
gsap animation

Preview

Installation

Use the shadcn CLI to install this component:

npx shadcn@latest add https://messyui.dev/r/animated-counter.json

Props

PropTypeDefaultDescription
targetnumber1234The target number to count to
durationnumber2Animation duration in seconds
prefixstring""Text before the number
suffixstring"+"Text after the number