FX · Text

A number that counts up to its value when it scrolls into view, formatted with Intl.NumberFormat.

66Components
12,840Weekly installs
$49.5Saved per seat
bash
npx shadcn@latest add https://www.rad-ui.com/r/count-to.json
React
import CountTo from "@/components/fx/count-to"

<CountTo to={12840} />
<CountTo to={49.5} format={{ style: "currency", currency: "USD", maximumFractionDigits: 1 }} />
  • Screen readers get the final formatted value only; the ticking copy is aria-hidden.
  • Tabular figures prevent sideways jitter.
  • prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) shows the final value without counting.
PropTypeDefaultDescription
to
number
—

Final value.

from
number
0

Starting value.

duration
number
1600

Milliseconds to count.

format
Intl.NumberFormatOptions
—

Number formatting.

locale
string
browser

Locale for formatting.

Edit this page on GitHub →