Gauge
Radial percentage gauge. A single measurement arc over a subtle track with a centered mono readout, in 3 sizes and 3 semantic color variants; the arc sweeps in and the value counts up in sync on first view.
Sizes
Variants
Add to your project
One command adds this component to your project.
1
Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.
npx shadcn@latest add @aicanvas/andromeda-gauge2
For dark mode, add the dark class to your <html> element:
<html class="dark">Props
Every prop this component accepts. Any other prop is forwarded to the underlying element.
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | 68 | The reading. Clamped to 0..max. Defaults to a demo reading so the bare component renders meaningfully. |
| max | number | 100 | Full scale — the arc shows value/max. |
| size | 'sm'|'md'|'lg' | 'md' | One of: sm, md, lg. |
| variant | 'accent'|'warning'|'fault' | 'accent' | Arc color by meaning: accent = live/healthy, warning = orange, fault = red. |
| unit | string | '%' | Suffix after the readout, muted + smaller. Pass '' for a unitless reading. |
| label | string | - | Optional code label below the value inside the circle (mono 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. |
AI Canvas