Speedometer
A sports-car cluster with needle inertia, a gearbox model, shift lights and red-line.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
Hold the throttle: speed builds, RPM climbs to the red-line, the shift lights flash and the gearbox upshifts (RPM drops). The needles are damped springs, so they overshoot on shifts like real gauges.
Installation
$ npx shadcn@latest add https://guetix.com/r/speedometer.json
Uses the shadcn CLI. It creates components/guetix/speedometer.tsx and installs nothing else.
Usage
example.tsx
import { Speedometer } from "@/components/guetix/speedometer";
export default function Example() {
return <Speedometer />;
}
Performance dashboardsAutomotive brandsLoad-time / score gauges
Under the hood
The details that make it feel right, and that a one-line prompt usually misses:
- 01A tiny engine + 6-speed gearbox model drives both gauges.
- 02Needles use a spring with damping, not CSS transitions.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| maxSpeed | number | 280 | Dial max. |
| redline | number | 7 | RPM ×1000. |
| unit | "km/h" | "mph" | "km/h" | Unit. |
| accent | string | — | Arc color. |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- Gauges are labelled images; throttle is a button (↑ / Space while focused).