Gauge

Show a value against a known range.

datachart

Preview

Live · keyboard ready

Diskof 512 GB

Queueof 200 tasks

Errorsper hour

When to use

One value against a known range, such as disk quota or health score.
Values with labelled bands, like Healthy, Filling up, and Critical.

When not to use

Use progress for task completion.
Use usage-meter for plan limits and activity-rings for several goals at once.

shadcn CLI

Also installs (1)

manicat-foundation

Manual install(+)

registry.jsonjson

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "gauge",
  "type": "registry:ui",
  "title": "Gauge",
  "description": "Show a value against a known range.",
  "categories": [
    "data"
  ],
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "https://manicat.viraza.net/r/manicat-foundation.json"
  ],
  "files": [
    {
      "path": "registry/components/gauge/gauge.tsx",
      "type": "registry:component",
      "target": "@components/manicat/gauge/gauge.tsx"
    },
    {
      "path": "registry/components/gauge/gauge.module.css",
      "type": "registry:component",
      "target": "@components/manicat/gauge/gauge.module.css"
    }
  ],
  "docs": "Docs and live preview: https://uiarc.dev/components/gauge",
  "meta": {
    "tier": "free",
    "kind": "component",
    "docs": "https://manicat.viraza.net/components/gauge",
    "markdown": "https://uiarc.dev/components/gauge/markdown",
    "tags": [
      "data",
      "chart"
    ]
  }
}

Usage

Install the component, then copy this into your app. Change the content and the props to fit your screen.

example.tsxtsx

"use client";

import { Gauge } from "@/components/manicat/gauge/gauge";

export function GaugeExample() {
  return (
    <div className="flex w-full max-w-md items-center justify-around gap-6">
      <Gauge value={72} label="Disk" detail="of 512 GB" />
      <Gauge value={64} label="Queue" detail="of 200 tasks" tone="success" />
      <Gauge value={18} label="Errors" detail="per hour" tone="danger" />
    </div>
  );
}

Examples

Real screens rather than isolated props. Switch to Code to copy a whole example into your project.

Resource usage Server capacity at a glance; the tone flips to danger when a limit is close.

Live · keyboard ready

CPUof 8 cores

Memoryof 32 GB

Diskof 512 GB

resource-usage-server-capacity-at-a-glance-the-tone-flips-to-danger-when-a-limit-is-close-.tsxtsx

"use client";

import { Gauge } from "@/components/manicat/gauge/gauge";

export function GaugeUsageExample() {
  return (
    <div className="flex w-full items-center justify-around gap-6">
      <Gauge value={72} label="CPU" detail="of 8 cores" />
      <Gauge value={91} label="Memory" detail="of 32 GB" tone="danger" />
      <Gauge value={34} label="Disk" detail="of 512 GB" tone="success" />
    </div>
  );
}

Accessibility

The ring is role="meter" with aria-valuemin, aria-valuemax, aria-valuenow, and an aria-valuetext including the band label.
Threshold labels name the state in text, so it never rests on color alone.
The SVG and animated readout are aria-hidden.

Motion

The ring fills once when half in view without overshoot, then springs to new values while the percent counts.
The band color and label change exactly as the count crosses a threshold.
Reduced motion lands on the value at once.

Responsive behavior

The ring is min(100%, 176px) wide and keeps its aspect ratio, so it shrinks in narrow columns.

Performance

It fills once when half in view, then springs to new values; it is one SVG arc with no running loop.

Notes for AI

Use for one value against a known range, such as quota or health. Use progress for task completion and usage-meter for plan limits.
Always add thresholds with labels when tone carries meaning.