Animated counter
Give changing totals a clear sense of movement.
pnpm dlx shadcn@latest add @uiarc/animated-counterLive · keyboard ready
- Standalone numbers that change, such as totals, prices, or live counts.
- Hero stats that roll up from zero when they scroll into view, via animateOnView.
- Use metric-card or stat-card when the number needs a card around it.
- Use text-morph for words rather than numbers.
Installation
Add Animated counter with the shadcn CLI, or copy the source by hand.
pnpm dlx shadcn@latest add @uiarc/animated-counterAdds the component and its local dependencies, and installs motion. First time? Add the @uiarc registry to components.json, or use the full URL:
example.tsx
import { AnimatedCounter } from "@/registry/components/animated-counter/animated-counter"; export function Raised({ amount }: { amount: number }) { return <AnimatedCounter label="Raised" value={amount} prefix="$" animateOnView />;}AnimatedCounter
An odometer style number whose digit columns roll to each new value.
PropTypeDefaultDescription
valueRequirednumber–The number to show.labelstring–Small label above the number.prefixstring""Text before the number, such as "$".suffixstring""Text after the number, such as "%".decimalsnumber0Fixed fraction digits.animateOnViewbooleanfalseRolls every digit up from zero the first time it scrolls into view.localestring"en-US"Formatting locale. Fixed by default so server and client match.- A visually hidden copy holds the full formatted text; the rolling digits are aria-hidden.
- It does not announce changes; wrap it in a live region if updates must be spoken.
- Each digit column turns in the direction the whole number moved, wrapping 9 to 0, with a slight stagger on first reveal.
- Columns and separators slide in or out when the digit count changes.
- Reduced motion jumps digits into place.
- It sizes to its digits, and columns slide in or out when the digit count changes, so neighbours shift slightly.
- Each digit is its own motion column; fine for a few counters, not for every cell of a table.
- The first reveal waits for 60% visibility through useInView.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use for standalone numbers that change: totals, prices, counts. Use metric-card or stat-card when the number needs a card around it.
- Pass a raw number and let decimals, prefix, and suffix format it; do not pass preformatted strings.
The full library index for assistants is at /llms.txt.