Gauge

A three-quarter ring for a percentage that fills in and warns past a threshold.

Build minutes

Bandwidth

Edge requests

Installation#

pnpm dlx shadcn@latest add @balick/gauge

Or pass the full URL: https://ui.balick.me/r/gauge.json

Usage#

import { Gauge } from "@/components/ui/gauge"

export function Usage() {
  return <Gauge value={76} aria-label="Bandwidth used" className="size-20" />
}

Props#

Prop	Type	Default	Description
`value` The value, from 0 to 100. Required.	`number`	—	The value, from 0 to 100. Required.
`showValue` Show the value in the middle.	`boolean`	true	Show the value in the middle.
`thresholds` Values from which the arc turns amber, then red. false keeps the foreground color.	`[number, number] \| false`	[70, 90]	Values from which the arc turns amber, then red. false keeps the foreground color.
`indeterminate` Turn a short arc while the value is not known yet.	`boolean`	false	Turn a short arc while the value is not known yet.