Gauge

Displays a single bounded reading as a radial arc.

Configurations

Supported configurations for this component.

4 examples

Within limits

Low battery

Critical

No readout

One command adds this component to your project.

Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.

npx shadcn@latest add @aicanvas/••••••••••••

Light and dark both come with the install and follow the dark class on <html>, the shadcn dark mode setup (next-themes with attribute="class").

Every prop this component accepts. Any other prop is forwarded to the underlying element.

Prop	Type	Default	Description
value	`number`	0	The reading. Clamped to 0..max. Defaults to 0, an empty ring, so the gauge never shows a reading nobody passed.
max	`number`	100	Full scale — the arc shows value/max.
size	`'sm'\|'md'\|'lg'`	'md'	One of: sm, md, lg.
thresholds	`{warning: number, fault: number}`	-	Where this reading stops being healthy, in the same units as `value`. Supply it and the arc colours itself — the preferred form, since a gauge that is TOLD its colour can contradict the number printed inside it. The order carries the direction: `{warning: 70, fault: 90}` is high-is-bad, `{warning: 30, fault: 15}` is low-is-bad. Boundaries are inclusive.
variant	`'accent'\|'warning'\|'fault'`	'accent'	Arc color by meaning: accent = live/healthy, warning = caution, fault = danger. The manual fallback, for a gauge with no meaningful threshold; `thresholds` wins.
unit	`string`	'%'	Suffix after the readout, muted + smaller. Pass '' for a unitless reading.
label	`string`	-	Optional code label below the value inside the circle (sans xs, muted, uppercase). Centered when showValue is false.
showValue	`boolean`	true	-
ariaLabel	`string`	-	Overrides the generated "<label or Gauge> <value> of <max><unit>" description.
className	`string`	-	Additional CSS classes applied to the root element.
style	`React.CSSProperties`	-	Inline styles applied to the root element.

Displays a single bounded reading as a matrix of cells that fill as it rises.

Triggers an action with an icon alone, for controls whose glyph reads as the label.

Collects a single line of text.