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>
);
}
More by zweiundeins
View all
Theme Switch
11
Busy
9
ECharts
1
Count Up
1
Sparkline
Drawer
Starfield
Meter