NeoTerm UI

Donut

Circular donut / ring progress indicator.

Import

import { Donut } from "neoterm-ui";

Usage

<Donut value={72} label="CPU" />
<Donut value={45} max={100} color="var(--cyan)" size={80} />

Props

PropTypeDefaultDescription
valuenumberCurrent value.
maxnumber100Maximum value.
sizenumber64Diameter in px.
strokeWidthnumber4Ring thickness.
colorstringvar(--chart-1)Ring fill color.
trackColorstringvar(--border)Background ring color.
labelstringCenter label text.