Odometer Number
.mdNumber that rolls each digit on its own spring reel, staggered left to right, when it scrolls into view or the value changes.
numbercountertickerpricingstatsodometer
Installation
$npx shadcn@latest add @geturui/number-ticker
Usage
usage.tsx
1import { NumberTicker } from "@/components/ui/number-ticker";
2
3export function Price({ yearly }: { yearly: boolean }) {
4 return (
5 <NumberTicker
6 value={yearly ? 39 : 49}
7 prefix="$"
8 className="text-6xl font-semibold"
9 />
10 );
11}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value* | number | — | Number to show. Changing it rolls the reels. |
prefix | string | "" | Text before the number, such as a currency sign. |
suffix | string | "" | Text after the number, such as % or /mo. |
decimals | number | 0 | Fixed number of decimal places. |
from | number | 0 | Value shown before it scrolls into view. |
stagger | number | 0.04 | Seconds between each digit starting to roll. |
className | string | — | Classes for the wrapper; set the font size here. |
Accessibility
- Screen readers get the final formatted value as one label, not the rolling digits.
- Uses tabular numerals so the width doesn't jitter while digits roll.
- Values are grouped with en-US separators (12,480) for readability.