Components

Odometer

Pro

A price or stat where every digit is a wheel: change the number and only the digits that moved spin, upward when it rises and downward when it falls.

$1,299

Installation

ProRequires a Planes Pro license.
npx shadcn add @useplanes/odometer

Unlock with Planes Pro

$99 once · 80 Pro components · lifetime updates.

I have a licenseGet Pro
<Odometer value={price} format={{ style: "currency", currency: "USD", maximumFractionDigits: 0 }} className="text-4xl font-semibold" />

Examples

Direction-aware digits

The wheels spin upward when the value rises and downward when it falls, and when the digit count changes the new digits roll in while the old ones roll out.

<Odometer value={n} prefix="$" />

Reduced motion

With prefers-reduced-motion nothing spins: each digit snaps to its new position and the formatted value is announced through a polite live region.

<Odometer value={12480} format={{ maximumFractionDigits: 0 }} />

Use cases

  • Pricing toggles

    Monthly/yearly switches where the price rolls instead of swapping — see PricingTable's animateNumbers prop.

  • Live counters

    Requests served, users online, revenue today — numbers that update while the page is open.

  • Cart totals

    A total that visibly moves when a quantity changes, so the change is impossible to miss.

  • Dashboard metrics

    KPI tiles that update on an interval without the whole figure flickering.