Dashral Pro is on the wayGet 30% off at launch

Dashral

Gauge

One value within a range as a half ring — a score, a quota or a target. A meter for assistive technology.

$ pnpm dlx shadcn@latest add https://dashral.com/r/gauge.json

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/gauge.json

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:

components.json
{
  "registries": {
    "@dashral": "https://dashral.com/r/{name}.json"
  }
}

Then add components by name:

$ pnpm dlx shadcn@latest add @dashral/gauge

Usage

example.tsx
import { Gauge } from "@/components/dashral/gauge"

<Gauge value={0.72} max={1} label="Storage used" formatOptions={{ style: "percent" }} />

Examples

Colored by level

levels picks the color from the value, like a scorecard.

Server health, live

Readings every two seconds; high is bad here, so the levels run green, amber, red, and a status line says what they mean.

api-prod-01

Jakarta · 4 vCPU · 16 GB

Under pressure

API reference

Gauge

Also takes every prop of <div>(opens in a new tab).

PropTypeDefault
valuenumber

Required.

—
min / maxnumber

The range.

0 / 100
labelstring

Under the number; also the accessible name.

—
formatOptions / localeIntl.NumberFormatOptions / string

e.g. { style: "percent" } with max={1}.

LocaleProvider's
levels{ from: number; className: string }[]

Colors by level, lowest first.

—
size / thicknessnumber

Width and arc width in pixels.

180 / 14

Accessibility

  • role="meter" with aria-valuenow, min, max and the formatted value as aria-valuetext.

Motion

  • The arc fills from empty when it first shows; instant with reduced motion.