Stepper

Multi-step stepper with emerald done, primary current, and muted pending tiles linked by colored rails.

Account

Team

Billing

4Done

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

Import & use

import { Nav24 } from "@/components/beste/piece/nav24";

<Nav24
  steps={[
    {
      "label": "Account",
      "state": "done"
    },
    {
      "label": "Team",
      "state": "done"
    },
    {
      "label": "Billing",
      "state": "current"
    },
    {
      "label": "Done",
      "state": "pending"
    }
  ]}
/>