Gauge
Show a value against a known range.
pnpm dlx shadcn@latest add @uiarc/gaugeLive · keyboard ready
- One value against a known range, such as disk quota or health score.
- Values with labelled bands, like Healthy, Filling up, and Critical.
- Use progress for task completion.
- Use usage-meter for plan limits and activity-rings for several goals at once.
Installation
Add Gauge with the shadcn CLI, or copy the source by hand.
pnpm dlx shadcn@latest add @uiarc/gaugeAdds the component and its local dependencies, and installs motion. First time? Add the @uiarc registry to components.json, or use the full URL:
example.tsx
import { Gauge } from "@/registry/components/gauge/gauge"; export function DiskUsage() { return ( <Gauge label="Disk usage" value={72} detail="360 of 500 GB" thresholds={[ { from: 0, tone: "success", label: "Healthy" }, { from: 70, tone: "warning", label: "Filling up" }, { from: 90, tone: "danger", label: "Critical" }, ]} /> );}Gauge
A 270 degree ring meter with a percent readout and optional labelled threshold bands.
PropTypeDefaultDescription
valueRequirednumber–Current value within min and max.minnumber0Lower bound.maxnumber100Upper bound.labelRequiredstring–What is measured.detailstring–Secondary caption line.tone"accent" | "success" | "warning" | "danger""accent"Ring color when no threshold applies.thresholds{ from: number; tone: "accent" | "success" | "warning" | "danger"; label: string }[]–Bands by starting value. The highest band reached sets the tone and shows its label.- The ring is role="meter" with aria-valuemin, aria-valuemax, aria-valuenow, and an aria-valuetext including the band label.
- Threshold labels name the state in text, so it never rests on color alone.
- The SVG and animated readout are aria-hidden.
- The ring fills once when half in view without overshoot, then springs to new values while the percent counts.
- The band color and label change exactly as the count crosses a threshold.
- Reduced motion lands on the value at once.
- The ring is min(100%, 176px) wide and keeps its aspect ratio, so it shrinks in narrow columns.
- It fills once when half in view, then springs to new values; it is one SVG arc with no running loop.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use for one value against a known range, such as quota or health. Use progress for task completion and usage-meter for plan limits.
- Always add thresholds with labels when tone carries meaning.
The full library index for assistants is at /llms.txt.