A number that counts up with easing when it scrolls into view, formatted for any locale.
npx shadcn@latest add https://hyperblur.dev/r/count-up.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/count-up.tsx.
import { CountUp } from "@/components/hyperblur/count-up"
<CountUp to={12480} suffix="+" />| Prop | Type | Default | Description |
|---|---|---|---|
| to | number | required | Final value. |
| from | number | 0 | Starting value. |
| duration | number | 1.6 | Seconds the count takes. |
| decimals | number | 0 | Fraction digits shown. |
| prefix | string | "" | Text before the number. |
| suffix | string | "" | Text after the number. |
| locale | string | "en-US" | Locale passed to Intl.NumberFormat. |
| once | boolean | true | Count only the first time it enters the viewport. When false, replays every time. |