Animated counter
A countup animation for React. The number is an odometer: each digit column rolls to the new value, in the direction the number moved. Set animateOnView to count up from zero when it scrolls into view, and use prefix, suffix and decimals for money and percentages. Reduced motion jumps the digits into place.
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 "@/components/arc/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.
Realtime streamProComponentA live line that scrolls at 60fps as readings arrive, holds still on hover to read, and pops a marker on every anomaly.Presence stackProComponentAvatars of the people here now: joins pop in as the stack reflows, a counter rolls past the limit, dots show typing and idle, and hover fans it out with a gliding name label.Metric tickerProComponentA strip of live KPIs that roll to new values digit by digit and flash their change; rest on one to pause the strip and open its recent trend as a sparkline.