Gauge
Show a value against a known range.
npm install https://animui.stracture.net/__local/package.tgzLive · keyboard ready
- One value against a known range, such as disk quota or health score.
- Values with labelled bands, like Healthy, Filling up, and Critical.
- Use progress for task completion.
- Use usage-meter for plan limits and activity-rings for several goals at once.
Installation
Install animui once, then import any component or block from its typed package entry.
animui · 250 components and blocks
React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.
npm install https://animui.stracture.net/__local/package.tgzLoad the stylesheet once at your app root, then use the typed component import:
import 'animui/styles.css';
import { Gauge } from 'animui/gauge';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideexample.tsx
import { Gauge } from "animui/gauge"; export function DiskUsage() { return ( <Gauge label="Disk usage" value={72} detail="360 of 500 GB" thresholds={[ { from: 0, tone: "success", label: "Healthy" }, { from: 70, tone: "warning", label: "Filling up" }, { from: 90, tone: "danger", label: "Critical" }, ]} /> );}Gauge
A 270 degree ring meter with a percent readout and optional labelled threshold bands.
PropTypeDefaultDescription
valueRequirednumber–Current value within min and max.minnumber0Lower bound.maxnumber100Upper bound.labelRequiredstring–What is measured.detailstring–Secondary caption line.tone"accent" | "success" | "warning" | "danger""accent"Ring color when no threshold applies.thresholds{ from: number; tone: "accent" | "success" | "warning" | "danger"; label: string }[]–Bands by starting value. The highest band reached sets the tone and shows its label.- 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.
- 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.
- The ring is min(100%, 176px) wide and keeps its aspect ratio, so it shrinks in narrow columns.
- It fills once when half in view, then springs to new values; it is one SVG arc with no running loop.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- 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.
The full library index for assistants is at /llms.txt.