Gauge Bar

Segmented horizontal progress bar built on Radix Progress. Each segment fills at a threshold boundary with a 4-zone palette (destructive red → orange → yellow → teal-cyan) and cross-hatch texture. Ideal for capacity, score, or health indicators where zones carry meaning.

Installation

Usage

import { GaugeBar } from "@/components/gauge-bar";

export default function Page() {
  return <GaugeBar value={72} showLabel />;
}

Custom Segments and Thresholds

<GaugeBar
  value={58}
  max={100}
  segments={10}
  thresholds={[20, 40, 70, 100]}
  colors={[
    "oklch(0.704 0.191 22.216)",
    "oklch(0.76 0.17 50)",
    "oklch(0.88 0.18 95)",
    "oklch(0.85 0.14 190)",
  ]}
  showLabel
  labelFormatter={(v, m) => `${Math.round((v / m) * 100)}%`}
/>

Blueprint Composition (Cyan Ramp)

For editorial / prestige surfaces where the bar should read as a single typographic element (no zone-shift palette), pass a mono cyan ramp via the colors prop. This reuses the --rank-* tokens introduced for blueprint rank tables.

<GaugeBar
  value={42}
  segments={18}
  thresholds={[100, 100, 100, 100]}
  colors={[
    "var(--rank-3)",
    "var(--rank-4)",
    "var(--rank-5)",
    "var(--brand-cyan)",
  ]}
/>

The [100, 100, 100, 100] threshold tuple flattens the zones so every filled segment uses the highest-color stop — useful when the bar represents quantity rather than zone health.

Props

Features

• Radix Progress primitive — Accessible semantics + optional getValueLabel
• 4-zone palette — Override colors and thresholds for any scoring scheme
• Brand-aligned defaults — Destructive → orange → yellow → teal-cyan via oklch
• Self-contained theming — Uses var(--card), var(--border), var(--muted) with oklch fallbacks
• Cross-hatch fill — Subtle repeating-linear-gradient texture on filled segments

Lineage