Numbered step dots connected by a line. Completed steps fill emerald with a check.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Progress1 } from "@/components/beste/piece/progress1";
<Progress1
steps={[
{
"label": "Account"
},
{
"label": "Plan"
},
{
"label": "Payment"
},
{
"label": "Done"
}
]}
current={2}
/>Emerald filled circle with a bold check inside, a soft pinging ring, and a title plus description beneath.
Row of N equal chunks with the first K filled in the chosen tone. Trailing fraction count.
Three staggered pulsing dots inside a pill, paired with an optional label.
Labelled progress bar with a percent readout above and a tonal fill.
Single horizontal bar divided into tinted segments by percentage, with a legend row below.
Circular SVG ring with a centered percentage. Tone sets the stroke color.