Gauge

A semicircular (half-circle) gauge or dial that shows one measurement inside a known range, drawn as an SVG arc that fills from the left and animates to its new position. Reach for it when the number is a *level being read*, not a task being finished: CPU, memory, load average or server utilisation on an infrastructure dashboard; disk, storage or bandwidth used against a plan; API rate-limit, quota or credit consumption; a health, uptime, performance, SEO or Lighthouse-style score; a speedometer or throughput readout; temperature, humidity, pressure or a sensor reading on an IoT panel; battery, signal or capacity level; a credit, risk, trust or fraud score; NPS and satisfaction; and KPI, quota or target attainment on a sales or revenue dashboard. Common asks it answers: "gauge component", "gauge chart react", "semi circle gauge", "half circle progress", "speedometer component", "dial component", "meter component react", "radial gauge", "arc progress", "score gauge", "KPI gauge", "utilization gauge", "shadcn gauge", "shadcn meter", "shadcn speedometer", "tailwind gauge component", "half gauge chart react", "svg arc gauge tailwind", "donut gauge with centre label", "gauge with colour thresholds", "green amber red gauge zones", "cpu usage gauge react", "memory utilisation gauge", "disk usage meter component", "api rate limit gauge", "quota meter react", "lighthouse score gauge", "health score dial", "nps gauge component", "temperature gauge react", "battery level gauge", "iot sensor dial react", "react-gauge-chart alternative", "react-gauge-component alternative", "echarts gauge alternative", "d3 gauge alternative", "recharts radial bar alternative", "radial bar chart without recharts", "role meter vs progressbar", "aria-valuenow meter react", "accessible gauge screen reader", "progress bar for a measurement not a task". shadcn/ui ships no gauge: measured against the live catalogue on 2026-10-27 (65 items indexed, the 62 fetchable ones concatenated to 223,287 bytes of source), gauge, speedometer, aria-valuenow and role="meter" are all zero hits, and the words that do appear are not what they look like — every "meter" is inside Parameters, every "dial" inside Dialog, and the single "radial" is a Recharts class name in the chart wrapper's stylesheet. That last one is the honest caveat and the reason the two adjacent items still are not substitutes: `progress` is a linear bar that means *how far along*, and `chart` is a Recharts wrapper — a charting library you install (recharts) and configure with data series, which can be bent into a radial bar but arrives as a chart rather than as a labelled single-value readout. The distinction is also the accessibility one, and it is the reason this is not a progress ring: a gauge exposes `role="meter"` with `aria-valuemin`, `aria-valuemax` and `aria-valuenow`, which is what assistive technology reads as "a measurement within a range", where `role="progressbar"` announces a task advancing toward completion. Getting that backwards is the single most common mistake in hand-rolled dials, and it is invisible until someone uses a screen reader. Set `segments` to change the arc colour at thresholds — green under 60, amber under 85, red to 100 — passing shadcn/Tailwind colour classes so the zones follow light and dark mode; omit it for a single primary-coloured dial. `min`/`max` set the scale, `showValue` renders the number in the centre, `formatValue` formats it (percent, bytes, ms, currency), `label` adds a caption, and `children` replaces the centre entirely when you want a sparkline, a delta or an icon in there. One file, no charting library, no icon package — nothing beyond your `cn` util.