UIGetting StartedStepper

Stepper

Stepper component for multi-step processes.

The Stepper component provides a structured way to guide users through multi-step processes. It includes visual progress indicators, step validation, error handling, and navigation controls for a seamless user experience.

1
2
3
4
5

Personal Information

Installation

pnpm dlx shadcn@latest add https://shaddy-docs.vercel.app/r/stepper

Usage

Basic Usage
<Stepper>
  <Step>
    <h3>Step 1: Personal Information</h3>
    <p>Enter your basic details here.</p>
  </Step>
 
  <Step>
    <h3>Step 2: Contact Details</h3>
    <p>Provide your contact information.</p>
  </Step>
 
  <Step>
    <h3>Step 3: Review</h3>
    <p>Review your information before submitting.</p>
  </Step>
</Stepper>
With Validation
<Stepper
  onComplete={() => console.log("Form completed!")}
  completeLabel="Submit Form"
>
  <Step
    validate={async () => {
      // Your validation logic here
      if (!isValid) {
        return { hasError: true, message: "Please fill all required fields" };
      }
      return { hasError: false };
    }}
  >
    <h3>Step 1: Form Data</h3>
    {/* Your form content */}
  </Step>
 
  <Step>
    <h3>Step 2: Confirmation</h3>
    {/* Confirmation content */}
  </Step>
</Stepper>

API Reference

Stepper
PropTypeDefaultDescription
onComplete() => void | Promise<void>-Callback when final step is completed
completeLabelstring"Complete"Label for the complete button
Step
PropTypeDefaultDescription
validate() => StepError | Promise<StepError>-Optional validation for this step
Dropzone