A half-dial canvas gauge whose needle springs toward a value, with ok/warn/danger colour zones for dashboards and telemetry readouts.
import Gauge from "@/components/ui/gauge";
// Synthetic data mirroring the original's "Low is bad" and default
// playground examples (components/gauge/README.md): a thrust dial, a fuel
// dial where low values are the dangerous ones, and a hull-temperature dial.
export default function GaugeDemo() {
const tokens = {
"--sb-ok": "oklch(55% 0.15 152)",
"--sb-warn": "oklch(62% 0.14 70)",
"--sb-danger": "oklch(55% 0.2 25)",
"--sb-border": "oklch(88% 0.015 270)",
"--sb-text-1": "oklch(22% 0.03 270)",
"--sb-text-2": "oklch(40% 0.03 270)",
"--sb-brand": "oklch(55% 0.22 288)",
} as React.CSSProperties;
return (
<div
style={{
...tokens,
display: "flex",
flexWrap: "wrap",
alignItems: "center",
justifyContent: "center",
gap: "2rem",
padding: "3rem 1.5rem",
background:
"linear-gradient(oklch(88% 0.015 270 / 0.5) 1px, transparent 1px), linear-gradient(90deg, oklch(88% 0.015 270 / 0.5) 1px, transparent 1px), oklch(96% 0.01 270)",
backgroundSize: "16px 16px, 16px 16px, auto",
}}
>
<Gauge label="Thrust" unit="%" value={72} />
<Gauge label="Fuel" unit="%" value={18} warn={35} danger={15} />
<Gauge
label="Hull temp"
unit="°"
value={940}
min={0}
max={1200}
warn={800}
danger={1000}
/>
</div>
);
}