Odometer

Component

About

A number display whose digits roll on individual wheels to a new value, like a car's mechanical odometer, with an optional 3D drum mode, locale-aware grouping, and fixed decimal places. Ported to React from the Starbase (zweiundeins) Datastar/Rocket web component, MIT licensed.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Odometer to your project and fits it to your theme.

Code

How Odometer is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";
import Odometer from "@/components/ui/odometer";

// A value that arrives mid-roll takes over from where the wheels are; a wheel
// always turns the way its digits count, forward over the top when the
// number grows.
export default function OdometerRollingDemo() {
  const [km, setKm] = React.useState(221180);

  return (
    <div className="flex h-full w-full flex-col items-center justify-center gap-4 bg-background text-foreground">
      <Odometer value={km} style={{ fontSize: "2rem" }} />
      <div className="flex gap-2">
        <button
          className="rounded border px-3 py-1 text-sm"
          onClick={() => setKm((v) => v + 1)}
        >
          +1
        </button>
        <button
          className="rounded border px-3 py-1 text-sm"
          onClick={() => setKm((v) => v + 37)}
        >
          +37
        </button>
        <button
          className="rounded border px-3 py-1 text-sm"
          onClick={() => setKm((v) => v + 999)}
        >
          +999
        </button>
      </div>
    </div>
  );
}