Stepper

Overview

The Stepper component helps visualize progress through a multi-step process. It's perfect for forms, wizards, or any sequential workflow in your application. The component includes support for completed states, active states, and optional descriptions for each step.

Preview

Preview

✓

Details

Personal info

2

Address

Shipping info

3

Payment

Card details

4

Review

Final check

Code

import { Stepper } from './components/ui';

function StepperDemo() {
  return (
    <Stepper
      steps={[
        { label: 'Details', description: 'Personal info' },
        { label: 'Address', description: 'Shipping info' },
        { label: 'Payment', description: 'Card details' },
        { label: 'Review', description: 'Final check' },
      ]}
      activeStep={1}
    />
  );
}

Installation

npm

npx @mindfiredigital/ignix-ui add stepper

yarn

yarn @mindfiredigital/ignix-ui add stepper

pnpm

pnpm @mindfiredigital/ignix-ui add stepper

Usage

Import the component:

import { Stepper } from './components/ui';

Basic Usage

function BasicStepper() {
  const [currentStep, setCurrentStep] = useState(0);
  
  const steps = [
    { label: 'Step 1' },
    { label: 'Step 2' },
    { label: 'Step 3' },
  ];

  return (
    <Stepper
      steps={steps}
      activeStep={currentStep}
    />
  );
}

Examples

Basic Stepper

Preview

✓

Step 1

2

Step 2

3

Step 3

Code

<Stepper
  steps={[
    { label: 'Step 1' },
    { label: 'Step 2' },
    { label: 'Step 3' },
  ]}
  activeStep={1}
/>

With Descriptions

Preview

✓

Account

Create account

✓

Profile

Complete profile

3

Verify

Verification

4

Done

Final step

Code

<Stepper
  steps={[
    { label: 'Account', description: 'Create account' },
    { label: 'Profile', description: 'Complete profile' },
    { label: 'Verify', description: 'Verification' },
    { label: 'Done', description: 'Final step' },
  ]}
  activeStep={2}
/>

Interactive Example

Preview

1

Cart

Review items

2

Shipping

Delivery info

3

Payment

Card details

Code

function InteractiveStepper() {
  const [step, setStep] = useState(0);
  
  return (
    <div className="space-y-4">
      <Stepper
        steps={[
          { label: 'Cart', description: 'Review items' },
          { label: 'Shipping', description: 'Delivery info' },
          { label: 'Payment', description: 'Card details' },
        ]}
        activeStep={step}
      />
      <div className="flex justify-between mt-4">
        <button
          onClick={() => setStep(Math.max(0, step - 1))}
          disabled={step === 0}
          className="px-4 py-2 bg-blue-500 text-white rounded disabled:opacity-50"
        >
          Previous
        </button>
        <button
          onClick={() => setStep(Math.min(2, step + 1))}
          disabled={step === 2}
          className="px-4 py-2 bg-blue-500 text-white rounded disabled:opacity-50"
        >
          Next
        </button>
      </div>
    </div>
  );
}

Props

Prop	Type	Default	Description
steps	Array<{ label: string; description?: string; }>	[]	Array of step objects with labels and optional descriptions
activeStep	number	0	Current active step (0-based index)
className	string	-	Additional CSS classes

Customization

Custom Styling

You can customize the appearance using Tailwind CSS classes:

<Stepper
  className="max-w-2xl mx-auto"
  steps={[
    { label: 'Start', description: 'Begin here' },
    { label: 'Middle', description: 'Continue' },
    { label: 'End', description: 'Complete' },
  ]}
  activeStep={1}
/>

Form Integration Example

function StepperForm() {
  const [currentStep, setCurrentStep] = useState(0);
  const [formData, setFormData] = useState({
    personal: {},
    address: {},
    payment: {},
  });

  const steps = [
    { label: 'Personal', description: 'Basic info' },
    { label: 'Address', description: 'Shipping details' },
    { label: 'Payment', description: 'Payment method' },
  ];

  const renderStepContent = (step: number) => {
    switch (step) {
      case 0:
        return <PersonalInfoForm data={formData.personal} onSave={handleSave} />;
      case 1:
        return <AddressForm data={formData.address} onSave={handleSave} />;
      case 2:
        return <PaymentForm data={formData.payment} onSave={handleSave} />;
      default:
        return null;
    }
  };

  return (
    <div className="space-y-6">
      <Stepper steps={steps} activeStep={currentStep} />
      <div className="mt-8">
        {renderStepContent(currentStep)}
      </div>
    </div>
  );
}