# Gauge

Arc meter in semicircle or speedometer style, with a fill, coloured bands or a needle and ticks. Each band lights up as the value sweeps into it, and its label updates as it crosses.

> Composed · Pro · Data Display — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/gauge
```

## Import

```tsx
import { Gauge } from "@/components/ui/gauge/gauge";
```

## Variants

- `charging` — Charging: `npx @lumioui/cli add pro/gauge-charging`
- `credit-score` — Credit score: `npx @lumioui/cli add pro/gauge-credit-score`
- `speed-test` — Speed test: `npx @lumioui/cli add pro/gauge-speed-test`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `value` | `number` | Current value. |
| `min?` | `number` | Range start. Default 0. |
| `max?` | `number` | Range end. Default 100. |
| `size?` | `number` | Width in pt; the height follows the sweep. Default 240. |
| `strokeWidth?` | `number` | Arc thickness. Default 14. |
| `sweep?` | `number` | Arc span in degrees — 180 is a semicircle, 240 a speedometer. Default 180. |
| `segments?` | `GaugeSegment[]` | Coloured bands. Omit for a single fill arc. |
| `tone?` | `keyof ColorTokens` | Theme token for the fill arc. Default "primary" (follows `<Accent>`). |
| `color?` | `string` | Explicit fill colour — overrides `tone`. |
| `indicator?` | `"none" | "dot" | "needle"` | Value marker. Default "dot" with segments, "none" for a fill arc. |
| `ticks?` | `number[]` | Values to label around the arc (speedometer). |
| `showRange?` | `boolean` | Show min / max under the arc ends. Default false. |
| `showValue?` | `boolean` | Show the centre figure. Default true. |
| `format?` | `(n: number) => string` | Formats the centre figure. Default rounds. |
| `label?` | `React.ReactNode` | Line under the figure. Default: the band label the value falls in. |
| `children?` | `React.ReactNode` | Replace the centre block entirely. |
| `animate?` | `boolean` | Sweep in from `min` on mount. Default true. |
| `accessibilityLabel?` | `string` | Screen-reader label. Default "Gauge". |
| `className?` | `string` | — |

Source: https://lumioui.com/components/gauge