Get everything for $99, lifetime

Components

Odometer

Pro
$1,299

Installation

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

Works once the @useplanes registry is set up in your project (one-time). After that, copy and run commands directly.

Unlock with Planes Pro

$99 once · 161 Pro components · lifetime updates.

I have a licenseGet Pro
import { Odometer } from "@/components/ui/Odometer";

<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.