ComponentsCharts

Gauge & Progress ring

A score or attainment on a 180° / 270° arc with threshold bands and a target marker, and a full ring for progress to a goal — from a 20 px table-cell ring to a 160 px dashboard gauge. Plain SVG.

charts/gauge.tsxtheme · material · accent · density · font

Installation

$ pnpm add @vamos-ui/react

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";

Usage

import { Gauge, ProgressRing } from "@vamos-ui/react/charts";

<Gauge value={64} aria-label="SEO score" semantic="meter" />
<ProgressRing value={85} format="percent" aria-label="Profile completeness" />

In RTL only the arc mirrors; numbers stay readable.

The indeterminate circular spinner belongs to Spinner / Progress, not here.

Examples

Progress ring sizes

xs 20 · sm 36 · md 96 · lg 160 px. Labels show from 64 px; xs fits inline and in tables.

6 of 9 tasks

3/4 approvals

Thresholds (CRM)

color="auto" picks the band colour; the band label is read in aria-valuetext.

Northwind Traders

Kale Bakery

Atlas Logistics

Quota with target

target draws a marker; over max the arc stays full and a ring marks the overshoot.

Maya Chen · quota $500K

Partner target · 118%

API

Gauge

Prop	Type	Default
`value` Current value; null = unknown ("—").	`number \| null`	`—`
`max` Scale maximum.	`number`	`100`
`aria-label` Required accessible name.	`string`	`—`
`arc` Sweep.	`180 \| 270`	`270`
`thresholds` Bands from `at` upward.	`{ at, color, label? }[]`	`—`
`showThresholdBands` Paint the bands as a thin outer ring.	`boolean`	`false`
`target` Marker on the arc.	`number`	`—`
`color` Fill token, or the threshold colour.	`ChartColor \| "auto"`	`"chart-1"`
`format` "percent" shows value / max; anything else formats the value.	`FormatSpec`	`—`
`semantic` role="meter" for scores, role="progressbar" for completion.	`"meter" \| "progress"`	`"meter"`
`size` Width in px.	`"xs" \| "sm" \| "md" \| "lg" \| number`	`"lg"`
`thickness` Stroke width.	`number`	`—`
`label` Centre content; default the formatted value + band label.	`ReactNode \| null`	`—`
`labels` gauge namespace: valueText, valueTextWithLabel, target, noValue.	`Partial<GaugeLabels>`	`—`

ProgressRing

Prop	Type	Default
`value / max / aria-label / format / thresholds / color / label` As Gauge.	`—`	`—`
`semantic` ARIA role.	`"progress" \| "meter"`	`"progress"`
`size` 20 / 36 / 96 / 160 px.	`"xs" \| "sm" \| "md" \| "lg" \| number`	`"md"`

Gantt

Heatmap