Gauge

Pro

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.

Preview

Installation

npx @lumioui/cli add pro/gauge

Usage

import { Gauge } from "@/components/ui/gauge/gauge";
<Gauge />

Examples

Charging

An EV app's charging screen.

Credit score

A credit-score overview.

Speed test

An internet speed test.

API reference

Prop Type Default
value* number

Current value.

 —
min number

Range start. Default 0.

 0
max number

Range end. Default 100.

 100
size number

Width in pt; the height follows the sweep. Default 240.

 240
strokeWidth number

Arc thickness. Default 14.

 14
sweep number

Arc span in degrees — 180 is a semicircle, 240 a speedometer. Default 180.

 180
segments GaugeSegment[]

Coloured bands. Omit for a single fill arc.

 —
tone keyof ColorTokens

Theme token for the fill arc. Default "primary" (follows <Accent>).

 "primary"
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.

 false
showValue boolean

Show the centre figure. Default true.

 true
format (n: number) => string

Formats the centre figure. Default rounds.

 round
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.

 true
accessibilityLabel string

Screen-reader label. Default "Gauge".

 —
className string —