Other

Gauge

Radial meter: a muted background arc with a colored value arc and the reading centered inside — no needle. Threshold stops recolor the value arc and render as thin bands along the rim; exposes the ARIA meter role.

Import

import { Gauge } from "@zephora/react";

Examples

Basic

The value is clamped into `[min, max]` and rendered in the middle of the arc.

<Gauge value={64} />
<Gauge value={640} min={0} max={1000} size={120} />

Thresholds and formatValue

The arc adopts the color of the highest threshold at or below the current value; every stop is also drawn as a thin band along the outer rim. `formatValue` formats the centered reading (and `aria-valuetext`).

<Gauge
  value={82}
  formatValue={(v) => `${v}%`}
  thresholds={[
    { value: 0, color: "#16a34a" },
    { value: 60, color: "#f59e0b" },
    { value: 80, color: "#dc2626" },
  ]}
/>

Custom arc

`startAngle`/`sweep` reshape the arc (0° = 3 o'clock, clockwise) — here a half circle — and `thickness` tunes the ring weight.

// Half circle: start at 9 o'clock, sweep 180° clockwise.
<Gauge value={7.3} min={0} max={10} startAngle={180} sweep={180} thickness={16}
  formatValue={(v) => v.toFixed(1)} />

API

Gauge props

Prop	Type	Default	Description
`value` *	`number`	—	Current reading; clamped into [min, max].
`min`	`number`	`0`	Lower bound.
`max`	`number`	`100`	Upper bound.
`startAngle`	`number`	`135`	Arc start in degrees, 0° = 3 o'clock, clockwise.
`sweep`	`number`	`270`	Arc extent in degrees, clockwise from startAngle (capped at 360).
`thresholds`	`Array<{ value: number; color: string }>`	—	Color stops: the arc adopts the color of the highest threshold whose value is at or below the current value. Also drawn as thin bands along the outer rim.
`showValue`	`boolean`	`true`	Renders the reading in the middle of the arc.
`formatValue`	`(value: number) => string`	—	Formats the centered reading (and aria-valuetext).
`size`	`number`	`160`	Overall diameter in px.
`thickness`	`number`	`12`	Arc thickness in px.
`aria-label`	`string`	`"gauge"`	Accessible name of the meter.
`unstyled`	`boolean`	`false`	Headless mode — skips Zephora styling.
`…rest`	`HTMLAttributes<HTMLDivElement>`	—	All native div props are forwarded to the root element.