Stepper

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.

Installation

CLI

ignix add component stepper

manual

import { cn } from "../../../utils/cn";

interface Step {
  label: string;
  description?: string;
}

interface StepperProps {
  steps: Step[];
  activeStep: number; 
  className?: string;
}

export const Stepper = ({ steps, activeStep, className }: StepperProps) => {
  return (
    <div className={cn("flex items-center justify-between w-full", className)}>
      {steps.map((step, index) => {
        const isActive = index === activeStep;
        const isCompleted = index < activeStep;

        return (
          <div
            key={index}
            className="flex-1 flex flex-col items-center relative"
          >
            {/* Line connector */}
            {index !== steps.length - 1 && (
              <div className="absolute top-4 left-1/2 w-full h-0.5 bg-zinc-300 dark:bg-zinc-700 z-0" />
            )}

            {/* Step circle */}
            <div
              className={cn(
                "z-10 w-8 h-8 flex items-center justify-center rounded-full border-2 text-sm font-medium",
                isCompleted
                  ? "bg-green-500 border-green-500 text-white"
                  : isActive
                  ? "bg-white dark:bg-zinc-900 border-primary text-primary"
                  : "bg-white dark:bg-zinc-900 border-zinc-300 text-zinc-400"
              )}
            >
              {isCompleted ? "✓" : index + 1}
            </div>

            {/* Step label */}
            <div className="text-center mt-2">
              <div
                className={cn(
                  "text-xs font-medium",
                  isActive || isCompleted
                    ? "text-zinc-900 dark:text-white"
                    : "text-zinc-400"
                )}
              >
                {step.label}
              </div>
              {step.description && (
                <div className="text-[11px] text-zinc-500 dark:text-zinc-400">
                  {step.description}
                </div>
              )}
            </div>
          </div>
        );
      })}
    </div>
  );
};

Usage

Import the component:

import { Stepper } from '@ignix-ui/stepper';

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

import { Stepper } from '@ignix-ui/stepper';

<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

import { Stepper } from '@ignix-ui/stepper';

<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

import { Stepper } from '@ignix-ui/stepper';
import { useState } from 'react';

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>
  );
}

Customization

Custom Styling

You can customize the appearance using Tailwind CSS classes:

import { Stepper } from '@ignix-ui/stepper';

<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

import { useState } from 'react';
import { Stepper } from '@ignix-ui/stepper';

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>
  );
}

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