Odometer Counter React component
A number that rolls like a car odometer: each digit turns on its own column with a small delay, and separators and currency come from the locale.
About the Odometer Counter component
Odometer Counter makes a changing number feel mechanical and satisfying. Each digit turns on its own column with a small delay, so a new value rolls in from right to left, like the dial in an old car.
Pass it any number and it does the rest, including separators from the locale. Columns are keyed from the right, so nothing jumps when the number gains a digit.
When to use it
Use it for live totals, pricing, signup counters and any stat that changes while people watch.
For a number that never changes, plain text does the job.
Installation
Add the Odometer Counter component to your project with the shadcn CLI. It lands in components/odometer-counter.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/odometer-counterProps
<OdometerCounter /> accepts 6 props, all optional. It also accepts the usual <span> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| value | number | 48210 |
| prefix | string | "" |
| suffix | string | "" |
| decimals Digits after the decimal point. | number | 0 |
| duration Milliseconds a column takes to roll. | number | 1000 |
| locale Used for separators, e.g. "en-US" or "de-DE". | string | "en-US" |
- valuenumberDefault: 48210
- prefixstringDefault: ""
- suffixstringDefault: ""
- decimals
Digits after the decimal point.
numberDefault: 0 - duration
Milliseconds a column takes to roll.
numberDefault: 1000 - locale
Used for separators, e.g. "en-US" or "de-DE".
stringDefault: "en-US"
Odometer Counter FAQ
- How do I update it?
- Change the value prop and the columns roll to it.
- Can it show decimals or currency?
- Yes, with decimals, prefix and suffix.
- Which separators does it use?
- It follows locale, so de-DE gives 48.210 and en-US gives 48,210.
- What do screen readers hear?
- The whole number, once, rather than each column.