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.
The import and the props worth knowing about, in one place.
import { Progress16 } from "@/components/beste/piece/progress16";
<Progress16
surface="card"
bordered={true}
inverted={false}
title="Migration"
steps={[
"Export",
"Map fields",
"Review",
"Go live"
]}
activeIndex={2}
caption="Review finishes today, go live is scheduled for Friday."
/>Numbered step dots connected by a line. Completed steps fill emerald with a check.
Sunset gradient card with a flame glyph beside a big day count and a longest-streak caption.
Clinic setup
3/5An onboarding checklist with a completion bar, a done count, and steps that strike through as they are finished.