Wizard Stepper

import {
  WizardStepper,
  WizardStepData,
} from "@/components/ruixen/wizard-stepper";

const steps: WizardStepData[] = [
  { id: 1, title: "Account", description: "Create your account" },
  { id: 2, title: "Profile", description: "Set up your profile" },
  { id: 3, title: "Preferences", description: "Customize settings" },
  { id: 4, title: "Complete", description: "Review and finish" },
];
 
<WizardStepper steps={steps} currentStep={1} onStepChange={setStep} />;

const steps = [
  { id: 1, title: "Account", description: "Create your account" },
  { id: 2, title: "Profile", description: "Set up your profile" },
  { id: 3, title: "Complete", description: "Review and finish" },
];
 
<WizardStepper steps={steps} currentStep={1} />;

<WizardStepper steps={steps} currentStep={2} orientation="vertical" />

<WizardStepper steps={steps} currentStep={1} loading={isLoading} />

const steps = [
  { id: 1, title: "Welcome" },
  { id: 2, title: "Setup" },
  { id: 3, title: "Done" },
];
 
<WizardStepper steps={steps} currentStep={0} />;