# Gauge

> Half-circle gauge with warning and danger thresholds.

Component · Free · https://lodeui.com/components/gauge

## When to use

- Scores, capacity and SLA targets against a maximum.

## When not to use

- Trends: use a chart.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/gauge.json
```

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { Gauge } from "@/components/ui/gauge";

export function Cpu() {
  return <Gauge value={72} label="CPU" thresholds={[0.7, 0.9]} format={(v) => `${v}%`} />;
}
```

## API reference

### Gauge

A half-circle gauge that turns amber, then red, past thresholds.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| value / max | `number` | `— / 100` | Reading. |
| label / format | `string / (v) => string` | – | Caption and number. |
| thresholds | `[warn, danger]` | – | Fractions of max. |
| size | `number` | `200` | Width in px. |

## Accessibility

- role="meter" with min, max and now.

## Motion

- The arc sweeps to its value.

## Responsive behavior

- Shrinks to fit narrow containers.

## Performance

- One SVG.

## Notes for AI

- thresholds are fractions (0.7), not values (70).

## Related

- [Progress](https://lodeui.com/components/progress) — Linear bar, ring and segmented meter, all spring-driven.
- [KPI card](https://lodeui.com/components/kpi-card) — A metric with delta, hint and an optional sparkline.