Timeline Steps

Numbered step dots connected by a line. Completed steps fill emerald with a check.

Account
Plan
3
Payment
4
Done

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

Import & use
import { Progress1 } from "@/components/beste/piece/progress1";

<Progress1
  steps={[
    {
      "label": "Account"
    },
    {
      "label": "Plan"
    },
    {
      "label": "Payment"
    },
    {
      "label": "Done"
    }
  ]}
  current={2}
/>