Components
Segmented Gauge Bar
Discrete-segment gauge with ascending zone bands, per-segment zone coloring, a value-indicator needle, and zone captions.
Segmented Gauge Bar
A discrete-segment gauge that extends the GaugeBar / ArcGauge segmented-zone vocabulary. Instead of fixed threshold tuples, it takes ascending zone bands — each band carries its own color and caption, and every segment adopts the color of the zone it lands in. A value-indicator needle marks the current reading, with an optional numeric readout and zone legend. Consumes var(--gauge-*) tokens exclusively.
Preview
Loading preview...
Installation
Terminal
$npx shadcn@latest add @vandoko/segmented-gauge-barUsage
import { SegmentedGaugeBar } from "@/components/segmented-gauge-bar";
export default function Page() {
return <SegmentedGaugeBar value={68} showValue />;
}Custom Zones
Zones are ascending bands; the last band must end at 100. Each segment takes the
color of the zone its upper edge falls into.
<SegmentedGaugeBar
value={58}
segments={16}
zones={[
{ upTo: 30, color: "var(--gauge-critical)", label: "Low" },
{ upTo: 70, color: "var(--gauge-attn)", label: "Mid" },
{ upTo: 100, color: "var(--gauge-healthy)", label: "High" },
]}
showValue
/>Props
| Prop | Type | Default | Notes |
|---|---|---|---|
value | number | — | Current value (required) |
max | number | 100 | Max value |
segments | number | 24 | Total discrete segment count (≥ 1) |
zones | SegmentedZone[] | 4-zone gauge bands | Ascending { upTo, color, label? } bands |
showIndicator | boolean | true | Draw the value-indicator needle |
showZoneLabels | boolean | true | Render zone captions beneath the track |
showValue | boolean | false | Show the active-zone + numeric readout above |
valueFormatter | (v, m) => string | — | Custom formatter for the readout + ARIA value text |
Features
- Zone-band model — Each band owns a color + caption; segments inherit the band they fall in
- Value-indicator needle — Marks the live reading, themed via
--segmented-gauge-indicator - Brand-aligned defaults — Critical → warning → attention → teal-cyan via
var(--gauge-*) - Token-only theming — No oklch literals; new
--segmented-gauge-*tokens ship via the registry - Accessible —
role="meter"with ARIA value attributes + formatted value text
Lineage
| Property | Value |
|---|---|
| Source | @vandoko/segmented-gauge-bar |
| Curated | 2026-06-06 |
| License | MIT |
| Dependencies | None |