Stepper

import { Stepper, StepperStep } from "@fanvue/ui";
import type {
  StepItem,
  StepperProps,
  StepperStepProps,
  StepperStepSize,
  StepperStepState,
} from "@fanvue/ui";

import { Stepper } from "@fanvue/ui";

const threeSteps = [
  { title: "Account", description: "Create account" },
  { title: "Profile", description: "Set up profile" },
  { title: "Review", description: "Final review" },
];

<Stepper activeStep={1} size="sm" steps={threeSteps} />

import { Stepper } from "@fanvue/ui";

<Stepper
  activeStep={1}
  steps={[{ title: "Account" }, { title: "Profile" }, { title: "Review" }]}
/>

import { Stepper } from "@fanvue/ui";

const threeSteps = [
  { title: "Account", description: "Create account" },
  { title: "Profile", description: "Set up profile" },
  { title: "Review", description: "Final review" },
];

<Stepper activeStep={3} steps={threeSteps} />

import { Stepper } from "@fanvue/ui";

<Stepper
  activeStep={1}
  steps={[
    { title: "Account", description: "Create account" },
    { title: "Profile", description: "Set up profile" },
  ]}
/>

import { Stepper } from "@fanvue/ui";

const threeSteps = [
  { title: "Account", description: "Create account" },
  { title: "Profile", description: "Set up profile" },
  { title: "Review", description: "Final review" },
];

<Stepper activeStep={1} size="lg" steps={threeSteps} />

import { StepperStep } from "@fanvue/ui";

<StepperStep state="active" stepNumber={2} />

import { StepperStep } from "@fanvue/ui";

<div className="flex items-start gap-8">
  <StepperStep state="completed" stepNumber={1} title="Completed" description="Done" />
  <StepperStep state="active" stepNumber={2} title="Active" description="In progress" />
  <StepperStep state="upcoming" stepNumber={3} title="Upcoming" description="Not started" />
</div>

import { StepperStep } from "@fanvue/ui";

<div className="flex items-start gap-8">
  <StepperStep state="active" size="sm" stepNumber={1} title="Small" description="12px" />
  <StepperStep state="active" size="md" stepNumber={2} title="Medium" description="14px" />
  <StepperStep state="active" size="lg" stepNumber={3} title="Large" description="16px" />
</div>