Animated Number

Tasks done

Hours saved

On time

Installation

pnpm dlx shadcn@latest add @paneui/animated-number

import { AnimatedNumber } from "@/components/ui/animated-number"

<AnimatedNumber value={1842} locale="en-US" />

With reduced motion the number jumps to its value without counting. Screen readers get the final formatted value from a visually hidden copy.

Number Ticker rolls each digit like an odometer instead.

A formatted number that counts to value on a spring. Also accepts every prop of span.

value*: number; The number to count to.
from= 0: number; Where the count starts on first reveal.
locale= runtime locale: string; Locale for Intl.NumberFormat.
format: Intl.NumberFormatOptions; Currency, percent, compact, fraction digits and so on.
startOnView= true: boolean; Wait until half the number scrolls into view before counting.
stiffness= 380: number; Spring stiffness; higher settles faster.
damping= 42: number; Spring damping; the default is slightly overdamped so the count never overshoots, and lower values overshoot the target.
mass= 0.7: number; Spring mass.

Prop	Type	Default	Description
value*	number	—	The number to count to.
from	number	0	Where the count starts on first reveal.
locale	string	runtime locale	Locale for `Intl.NumberFormat`.
format	Intl.NumberFormatOptions	—	Currency, percent, compact, fraction digits and so on.
startOnView	boolean	true	Wait until half the number scrolls into view before counting.
stiffness	number	380	Spring stiffness; higher settles faster.
damping	number	42	Spring damping; the default is slightly overdamped so the count never overshoots, and lower values overshoot the target.
mass	number	0.7	Spring mass.

Data attribute	Description
data-slot	"animated-number"