FX · Components

Numbers that roll digit by digit like a mechanical counter.

1,284
bash
npx shadcn@latest add https://www.rad-ui.com/r/odometer.json
React
import Odometer from "@/components/fx/odometer" <Odometer value={followers} />
  • Screen readers get the formatted number as plain text; the rolling strips are aria-hidden.
  • `live` opts in to polite announcements of changes; leave it off for numbers that change often.
  • Defaults to en-US formatting so server and client match.
  • prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) swaps digits without rolling.
PropTypeDefaultDescription
value
number
—

The number.

format
Intl.NumberFormatOptions
—

Number formatting.

locale
string
'en-US'

Locale for formatting.

live
boolean
false

Announce changes politely.