NeoTerm UI

Gauge

Semi-circular gauge meter for displaying a value within a range.

Import

import { Gauge } from "neoterm-ui";

Usage

<Gauge value={67} label="Memory" />
<Gauge value={90} max={100} color="var(--destructive)" />

Props

PropTypeDefaultDescription
valuenumberCurrent value.
maxnumber100Maximum value.
sizenumber80Diameter in px.
strokeWidthnumber5Arc thickness.
colorstringvar(--chart-1)Arc fill color.
labelstringLabel below the gauge.
showValuebooleantrueDisplay the numeric value.