Components
Animated Numbers
An accessible number counter that animates into view with locale-aware formatting, prefixes, suffixes, decimals, delays, and reduced-motion support.
animationmotionnumbersstatisticsaccessibility
Installation
$npx shadcn@latest add @navui/animated-numbersAPI Reference
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | - | The final numeric value displayed when the animation completes. |
from | number | 0 | The starting value used before the component enters the viewport. |
prefix / suffix | string / string | "" / "" | Text rendered immediately before or after the formatted number. |
decimalPlaces | number | 0 | The fixed minimum and maximum number of fraction digits. |
duration / delay | number / number | 1 / 0 | Animation duration and start delay in seconds. |
locale | string | "en-US" | Locale passed to Intl.NumberFormat for separators and decimal formatting. |
...props | React.ComponentPropsWithoutRef<"span"> | - | Native span attributes and className. Children are omitted because the formatted value is managed by the component. |
Customization
- Pass
classNameto restyle the component. Classes are merged withcn, so your utilities win. - Styling uses Tailwind utility classes and theme tokens, so it adapts to light/dark mode automatically.
- Tune behavior with the props in the API reference above, for example
value.