Setup Checklist Card

An onboarding checklist with a completion bar, a done count, and steps that strike through as they are finished.

Clinic setup

3/5

Create your workspace

Import member records

Connect billing account

Invite your team

Publish booking page

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use

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
    }
  ]}
/>