Data viz
Radial gauge
One number, framed as an arc — progress to a goal, a utilization rate, a health score. The circular cousin of the linear Progress bar, sized for a KPI tile. Drawn as plain SVG with a sweeping fill and a count-up center value.
npx shadcn@latest add @orbit/radial-gaugeOverview
Live — the fill sweeps in and the value counts up on load.
Variants
The 270° arc is the default — open at the bottom, room for a label. The half gauge reads like a speedometer; the full ring closes the loop for a pure percentage.
Color
With color=“threshold” the arc turns red below 40, amber below 70, and green at or above — so a glance reads as good or bad, not just a number. Status colors stay reserved for status: always pair them with the word.
In context
A row of gauges turns a dashboard header into an at-a-glance status board — each metric framed against its target.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "arc" | "semi" | "full" | "arc" | 270° arc open at the bottom, 180° speedometer, or a closed ring. |
| value | number | 0 | Current value. The arc reflects it immediately; the center counts up to it. |
| min / max | number | 0 / 100 | Range bounds — any range works, the fill and thresholds use the % of range. |
| size | number | 160 | Outer size in px (width = height). Stroke scales at ~8.5% of size, min 8px. |
| color | "accent" | "threshold" | string | "accent" | accent = var(--pri); threshold = danger < 40%, warning < 70%, success ≥ 70%; or any color token. |
| label | string | — | Caption under the value, and the gauge's accessible name. |
| unit | string | "%" | Suffix beside the value. Pass "" to hide. |
| showValue | boolean | true | Render the count-up value in the center. |
| …rest | HTMLAttributes<HTMLDivElement> | — | Forwarded to the root div, including ref and className. |
Usage
A gauge shows one value against a range. For several series or a trend over time, use a bar or line chart instead.
Frame against a clear range
A gauge only means something with a known min and max — progress to a goal, a percent, a score out of N.
Use it for unbounded counts
Raw totals with no ceiling (revenue, signups) belong in a stat or a chart, not an arc.
Pair color with a label
Threshold color is a fast signal, but always back it with the number and a word like “At risk”.
Crowd many gauges together
A grid of arcs is hard to compare precisely — past a few KPIs, switch to a bar chart.
Keyboard & accessibility
The gauge is a meter, not a picture — its value and range are exposed to assistive tech, and reduced motion skips the sweep and count-up.