Gauge
Semicircular gauge with animated needle or arc fill, colored threshold zones and meter semantics.
Copy a prompt for your AI coding tool with the source, dependencies and usage
Props
GaugeProps
Also accepts all props of Omit<React.ComponentProps<"div">, "children">
| Prop | Type | Default | Description |
|---|---|---|---|
| value* required | number | — | — |
| min | number | 0 | — |
| max | number | 100 | — |
| zones | GaugeZone[] | defaultZones | Threshold zones from low to high. Defaults to green / amber / red at 60% and 85%. |
| variant | "needle" | "arc" | "needle" | "needle" shows solid zones with a needle; "arc" fills an arc up to the value |
| size | "sm" | "md" | "lg" | "md" | — |
| label* required | string | — | Accessible name and visible caption |
| unit | string | "" | — |
| format | (value: number) => string | — | — |
Install
$ npx shadcn@latest add https://chromotion.dev/r/gauge.json