# Number ticker

> Every digit rolls on its own wheel, odometer style.

Component · Free · https://lodeui.com/components/number-ticker

## When to use

- KPIs and counters where digits rolling makes the change legible, like live visitors or prices.

## When not to use

- Values that change many times a second.
- Very long numbers in tight spaces.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/number-ticker.json
```

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { NumberTicker } from "@/components/ui/number-ticker";

export function Mrr({ value }: { value: number }) {
  return <NumberTicker value={value} format={{ style: "currency", currency: "USD", maximumFractionDigits: 0 }} className="text-3xl font-semibold" />;
}
```

## API reference

### NumberTicker

Formats with Intl.NumberFormat and gives each digit its own rolling column.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| value | `number` | – | The number to show. |
| format | `Intl.NumberFormatOptions` | – | Currency, percent, decimals, compact notation. |
| locale | `string` | `"en-US"` | Formatting locale. |

## Accessibility

- The formatted value is in a visually hidden span; the digit wheels are aria-hidden.

## Motion

- Each digit springs to its new position (stiffness 140, damping 20).
- Columns are keyed from the right, so growing from 999 to 1,000 doesn't shuffle digits.

## Responsive behavior

- Inline text; inherits size from its parent.

## Performance

- Ten spans per digit; fine for dashboards with dozens of tickers.

## Notes for AI

- Pass rounded values; decimals are shown as formatted.

## Related

- [Animated number](https://lodeui.com/components/animated-number) — A number that springs to its new value instead of jumping.
- [KPI card](https://lodeui.com/components/kpi-card) — A metric with delta, hint and an optional sparkline.