Gauge

A component that renders progress or ratios as a radial arc (SVG ring). Composed of a track, a filled arc, and a center value label. Colors use our own tokens exclusively — not Geist's built-in palette.

Color Variants

Set the arc color using a semantically appropriate token variable. --c-primary (primary progress), --c-sky (secondary), --c-positive (complete / positive), --c-warning (caution). The track uses --c-line-soft (auto dark-mode switch via token).

72%Overall Progress72 / 100
55%Team Contribution55 / 100
88%Completed Tasks88 / 100
34%Budget Spent34 / 100

Size Variants

Scale SVG width/height and stroke-width together to produce small (80px), default (120px), and large (160px) sizes.

65%Small80px
65%Default120px
65%Large160px

Rules

  • Arc range: starts at 225°, sweeps 270° (ends at 315°). Both caps use stroke-linecap: round.
  • Track: stroke: var(--c-line-soft) — the token switches automatically in dark mode (no separate dark override needed).
  • Arc color: choose a semantically appropriate token ( --c-primary / --c-sky / --c-positive / --c-warning). Never use Geist-specific colors.
  • Center value text: --ff-en 800. The background is transparent, so use fill: var(--c-ink-deep) (no literal color needed — there is no filled background).
  • role="meter" + aria-valuenow / aria-valuemin / aria-valuemax + aria-label="Gauge: X%" — provides screen readers with value-range semantics.
  • Recommended sizes are 80, 120, and 160 px. The filled amount is expressed by calculating stroke-dasharray (arc circumference) and stroke-dashoffset (empty portion).