Back to components
ComponentTypographyFree

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.

Install
Copied!
npx shadcn@latest add @reactframe/odometer-counter

Related components

Scroll Word Highlight
Paper Fold Heading
Free
Kinetic Typography Showcase
Extruded Depth Text
Free
Curved Text Marquee
Free
SEO-ready
Blog Card Horizontal