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";

// Separators follow `lang`: the digits themselves are always 0 to 9, but the
// thousands grouping and decimal mark follow the locale (221'180.5,
// 221 180,5, 221,180.5).
export default function OdometerLocaleDemo() {
  return (
    <div
      className="grid h-full w-full items-center justify-center gap-2 bg-background text-foreground"
      style={{ fontSize: "1.5rem" }}
    >
      <Odometer value={1234567.5} decimals={1} lang="de-CH" />
      <Odometer value={1234567.5} decimals={1} lang="fr-CH" />
      <Odometer value={1234567.5} decimals={1} lang="en" />
    </div>
  );
}