Circular SVG ring with a centered percentage. Tone sets the stroke color.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Progress2 } from "@/components/beste/piece/progress2";
<Progress2
value={72}
tone="primary"
/>Labelled progress bar with a percent readout above and a tonal fill.
Emerald filled circle with a bold check inside, a soft pinging ring, and a title plus description beneath.
Half-circle speedometer arc with a centered value, unit, and caption.
Single horizontal bar divided into tinted segments by percentage, with a legend row below.
Numbered step dots connected by a line. Completed steps fill emerald with a check.
Row of N equal chunks with the first K filled in the chosen tone. Trailing fraction count.