@aelig/wizard-builder

Wizard Builder

Add

pnpm dlx shadcn@latest add @aelig/wizard-builder

Renders a route-aware wizard step indicator with validation-aware navigation.

Preview

Active step content

Usage

"use client"

import { WizardBuilder } from "@/components/ui/wizard-builder"

const steps = [
  { label: "Profile", path: "profile", icon: "user", isValidated: true },
  { label: "Billing", path: "billing", icon: "credit-card", isValidated: false },
  { label: "Confirm", path: "confirm", icon: "check", isValidated: false },
]

export function CheckoutWizard({ children }: { children: React.ReactNode }) {
  return <WizardBuilder wizardBuilder={steps}>{children}</WizardBuilder>
}

Variants and options

isValidated

Controls whether users can navigate to a step.

icon

Accepts a Lucide icon name for each step marker.