Multi-step stepper with emerald done, primary current, and muted pending tiles linked by colored rails.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
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"
}
]}
/>