Skip to main content

​
Overview

The Stepper component displays multi-step processes with support for multiple variants (compact, timeline, vertical, underline, numeric) and step statuses.

​
Basic Usage

import { Stepper } from '@peppermint-design/devreadykit-custom';

export default function StepperBasic() {
  const steps = [
    { title: 'Step 1', description: 'Description 1' },
    { title: 'Step 2', description: 'Description 2' },
    { title: 'Step 3', description: 'Description 3' }
  ];

  return <Stepper steps={steps} currentStep={1} />;
}

​
Variants

import { Stepper } from '@peppermint-design/devreadykit-custom';

const steps = [
  { title: 'Step 1', description: 'Description 1' },
  { title: 'Step 2', description: 'Description 2' },
  { title: 'Step 3', description: 'Description 3' }
];

<Stepper steps={steps} variant="compact" currentStep={1} />
<Stepper steps={steps} variant="timeline" currentStep={1} />
<Stepper steps={steps} variant="vertical" currentStep={1} />
<Stepper steps={steps} variant="underline" currentStep={1} />
<Stepper steps={steps} variant="numeric" currentStep={1} />

​
With Current Step

import { Stepper } from '@peppermint-design/devreadykit-custom';

const steps = [
  { title: 'Step 1', description: 'Description 1' },
  { title: 'Step 2', description: 'Description 2' },
  { title: 'Step 3', description: 'Description 3' }
];

<Stepper 
  steps={steps} 
  currentStep={2}
/>

​
Props

​
StepperStep