Installation
terminal
npx shadcn@latest add https://ui.thilina.dev/r/animated-number.jsonUsage
app/page.tsx
import { AnimatedNumber } from "@/components/animated-number";
export default function Page() {
return (
<p className="text-4xl font-semibold">
<AnimatedNumber
value={12480}
format={{ style: "currency", currency: "USD" }}
startOnView
/>
</p>
);
}The number springs from zero on first render (or first view with
startOnView) and glides whenever value changes, which makes it a natural
fit for pricing toggles, dashboards, and stat counters. Digits render in
tabular figures so the layout never jitters.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | - | The target value. Changes animate from the current position. |
format | Intl.NumberFormatOptions | - | Formatting, e.g. currency or percent. Applied every frame. |
locale | string | - | Locale for the formatter. Defaults to the runtime locale. |
startOnView | boolean | false | Start counting only once the element scrolls into view. |
springOptions | SpringOptions | - | Custom spring physics for the count. |
Accessibility
Screen readers get only the final value through aria-label; the animated
frames are aria-hidden, so nothing announces sixty intermediate numbers.
Under prefers-reduced-motion the value updates instantly.