Gauge

Dashboards

About

A half-dial canvas gauge whose needle springs toward a value, with ok/warn/danger colour zones for dashboards and telemetry readouts.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Gauge to your project and fits it to your theme.

Code

How Gauge is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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>
  );
}