Stepper

import { Stepper } from "@/components/ui/stepper";

import {
  Stepper,
  Step,
  StepIndicator,
  StepLabel,
  StepDescription,
  StepContent,
} from "@/components/ui/stepper";
 
export function StepperExample() {
  const [activeStep, setActiveStep] = React.useState(0);
 
  return (
    <Stepper activeStep={activeStep}>
      <Step>
        <StepIndicator>1</StepIndicator>
        <div className="ml-3">
          <StepLabel>Step 1</StepLabel>
          <StepDescription>Description for step 1</StepDescription>
        </div>
      </Step>
      <Step>
        <StepIndicator>2</StepIndicator>
        <div className="ml-3">
          <StepLabel>Step 2</StepLabel>
          <StepDescription>Description for step 2</StepDescription>
        </div>
      </Step>
      <Step>
        <StepIndicator>3</StepIndicator>
        <div className="ml-3">
          <StepLabel>Step 3</StepLabel>
          <StepDescription>Description for step 3</StepDescription>
        </div>
      </Step>
    </Stepper>
  );
}