caliper uidocs
DemoSign inGet Pro

Gauge

Free

A dial for one value in a range, with named thresholds.

Installs components/ui/gauge.tsxDepends on d3-shapeMotion shared motion tokens
pnpm dlx shadcn@latest add https://caliperui.site/r/gauge.json

Service health

Latency within target

When to use #

Use it for

  • Health, capacity and scores that have meaningful zones.
  • A single status that deserves emphasis.

Skip it when

  • A trend; use a line.

Installation #

terminal
pnpm dlx shadcn@latest add https://caliperui.site/r/gauge.json

Adds its 5 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx
import { Gauge } from "@/components/ui/gauge"

export function HealthGauge() {
  return (
    <div className="w-full max-w-xs">
      <Gauge
        label="Service health"
        value={72}
        detail="Latency within target"
        thresholds={[
          { from: 0, label: "Poor", tone: "destructive" },
          { from: 40, label: "Fair", tone: "warning" },
          { from: 70, label: "Good", tone: "success" },
        ]}
      />
    </div>
  );
}

API reference #

Gauge

component
PropTypeDefault
label *string—
value *number—
minnumber0
maxnumber100
detailstring—
thresholdsreadonly GaugeThreshold[][]
classNamestring—

Accessibility #

It is built on native elements and keeps aria-label, aria-valuemin, aria-valuemax, aria-valuenow, aria-valuetext and aria-hidden in step with state.

No custom key handling; Tab and the native activation keys do the work.

Motion #

Transitions use the shared duration and easing tokens. Under prefers-reduced-motion those tokens collapse to instant and travel distances go to zero, so state changes still happen without movement.