Gauge

Default

Compose a gauge from primitives: a track, an arc and the value. Everything is plain SVG, so any SVG attribute or Tailwind class works on it.

Usage

Import the parts you need from the component's folder.

import {
  Gauge,
  GaugeTrack,
  GaugeArc,
  GaugeValue,
} from "@/components/ui/gauge";

Half gauge

Set startAngle and endAngle for any sweep, and fit="content" so the box hugs the arc and fills the width you give it.

Needle styles

Four needle shapes: line, pointer, compass and arrow. Add GaugeHub for the pivot.

Zones

Coloured bands between cutoffs, with optional gaps and round caps, behind a needle.

Stack

Split the fill into parts that sweep as one, by weight or by fixed cutoffs.

Ticks and labels

Evenly spaced ticks, numeric labels and a needle make a speedometer.

Marks

Cut the ring into equal segments, here ten glasses, by drawing marks in the surface colour over a band.

Progress ring with a dot

A full 360° ring with a dot that rides the arc, and an optional halo that stands it off the band.

Tooltip

Hover, press or focus the gauge. The bubble is portalled to the body and flips to stay on screen.

Slider control

GaugeControl makes the gauge a slider: drag the ring, or use arrow keys, Page Up and Down, Home and End.

Knob

With knob, a drag anywhere on the face turns the value by as far as the pointer goes round.

Inset gauge

A whole gauge inside another, with its own value and domain, like a fuel dial under a speedometer.

Compass

wrap treats the domain as a closed ring so a heading crossing north takes the short way, and compassLabel names the points.

Transitions

A gentle spring by default, a bouncy spring, a timed tween with an easing curve, or no transition at all.

Centred dial

Anchor the arc at zero with from, so values below and above grow in opposite directions.

Bars: Default

Forty radial bars, painted with the rainbow gradient. The centre value rolls in as the gauge scrolls into view. Set variant="bars" on Gauge; no children are needed.

Bars: Solid colour

Any CSS colour: hex, oklch(), or currentColor to follow the text colour.

Bars: Tailwind gradient classes

Pass from-*, via-* and to-* classes. The browser resolves the gradient, so any Tailwind v4 colour works.

Bars: Tailwind background class

A single bg-* class paints every bar with its computed colour, theme tokens included.

Bars: CSS variables

var(--chart-1), var(--color-amber-500) or any custom property, resolved per theme.

Bars: CSS gradient

A full linear-gradient() string, with explicit angles and stop positions.

Bars: Colour list

An array of colours is spread evenly along the sweep.

Bars: OKLCH stops

[position, L, C, H] stops are interpolated per bar, with no browser round trip, so they render on the server.

Bars: Function

Return a colour for each bar from its position t (0 to 1) and index.

Bars: Remaining

Show max minus value in the centre with show-remaining.

Bars: Number formats

Add a suffix, keep compact notation, or print the exact number with a locale.

Bars: Custom track

Colour the unlit bars with trackColor.

Bars: Transitions

Bars and number share one animated value, so they always move together. Pass a spring, a tween, or false for none.

Bars: Live value

Bars and number follow a changing value on the same spring.

Example: Monitor

A server monitor: load, temperature and fan on needle tiles, a CPU dial with a ring per core, memory and swap on one ring, network on a twin half dial, disk volumes and a top-style process list.

Example: Health

A day in a health app: activity rings with the week beside them, live heart rate over its training zones, last night's sleep round a 24-hour dial, steps and water filling to their goals, and vitals on their normal ranges.

Example: Time

World clocks for six cities, a chronograph stopwatch with laps, alarms on a 24-hour dial, and a bank of countdown timers.

Example: Weather

A Reykjavik afternoon: temperature over the hours ahead, a live wind vane, the sun's path, an aneroid barometer with its set hand, air quality and condition tiles.

Example: Smart Home

A smart home you can turn: a thermostat per room, dimmers for the lights, a volume knob beside what is playing, the car charging to its limit, the grid leaning between export and import, and tiles for air, water and the washer.

Example: Dashboard

A twin-dial cluster: a tachometer with its redline band, and a speedometer with fuel closing its ring.

Example: Cockpit

The six-pack of a light aircraft: airspeed, attitude, altitude, turn coordinator, heading and vertical speed, flown by a toy autopilot.

API Reference

Accessibility

Keyboard shortcuts and ARIA behavior.