Radial progress gauge with a tone-colored arc, the percentage centered, and a caption line beside it.
The import and the props worth knowing about, in one place.
import { Dashboard21 } from "@/components/beste/piece/dashboard21";
<Dashboard21
surface="card"
bordered={true}
inverted={false}
label="Storage used"
value={68}
caption="34 GB of 50 GB"
tone="violet"
/>Semi-circle gauge with a tone-colored arc that fills to the score, the number centered below, and a status line.
Horizontal milestone tracker with tone-filled done checks, a ringed current step, muted pending steps, and dates below.
Three concentric SVG rings with their own progress levels and a matching legend of labels, values, and units.
Compact metric card with a large value, delta percentage, and an SVG sparkline with a tone-colored stroke and faint area fill.