Numbered step dots connected by a line. Completed steps fill emerald with a check.
The import and the props worth knowing about, in one place.
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.
Migration
Review finishes today, go live is scheduled for Friday.
A horizontal progress card with numbered nodes joined by connectors, marking finished, current, and upcoming steps.
Circular progress ring that draws itself from zero to the target on mount while the centre percentage counts up in step, then holds.
Row of N equal chunks with the first K filled in the chosen tone. Trailing fraction count.