Gauge

A compact circular meter for bounded quantities such as context remaining, API usage, storage, and seats.

Installation

Copy the command below and run it in your terminal.

bunx --package @sivir-ui/svelte sivir add gauge

Usage

Use value and max for the filled portion. Provide label to name the meter for screen-reader users; children can replace the default numeric center text.

import { Gauge } from '@sivir-ui/svelte/components/gauge';

<Gauge value={85} label="Context remaining" />
<Gauge value={72} max={100} label="Monthly API usage" tone="warning">72%</Gauge>

Examples

Use Gauge for agent context and product limits.

Context window

Usage limit

Monthly API usage

72,000 of 100,000 requests

Anatomy

Gauge - Displays a value as a filled arc.