Clinic setup
3/5An onboarding checklist with a completion bar, a done count, and steps that strike through as they are finished.
The import and the props worth knowing about, in one place.
import { Progress15 } from "@/components/beste/piece/progress15";
<Progress15
title="Clinic setup"
steps={[
{
"label": "Create your workspace",
"done": true
},
{
"label": "Import member records",
"done": true
},
{
"label": "Connect billing account",
"done": true
},
{
"label": "Invite your team",
"done": false
},
{
"label": "Publish booking page",
"done": false
}
]}
/>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.
Numbered step dots connected by a line. Completed steps fill emerald with a check.
A row of pill segments fills left to right beside a live percentage, flashes a check at one hundred, holds for a beat, and starts over.
Sunset gradient card with a flame glyph beside a big day count and a longest-streak caption.