> ## Documentation Index
> Fetch the complete documentation index at: https://docs.devreadykit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Stepper

> Stepper component for displaying multi-step processes

export const StepperVariantsPreview = () => <iframe src="https://kerny-custom.vercel.app/preview/StepperVariants" frameBorder="0" width="100%" height="600"></iframe>;

export const StepperBasicPreview = () => <iframe src="https://kerny-custom.vercel.app/preview/StepperBasic" frameBorder="0" width="100%" height="260"></iframe>;

## Overview

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

## Basic Usage

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    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} />;
    }
    ```
  </Tab>

  <Tab title="Preview">
    <StepperBasicPreview />
  </Tab>
</Tabs>

## Variants

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    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} />
    ```
  </Tab>

  <Tab title="Preview">
    <StepperVariantsPreview />
  </Tab>
</Tabs>

## With Current Step

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    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}
    />
    ```
  </Tab>

  <Tab title="Preview">
    <StepperBasicPreview />
  </Tab>
</Tabs>

## Props

<PropsTable>
  | Prop        | Type                                                                | Default | Description               |
  | :---------- | :------------------------------------------------------------------ | :------ | :------------------------ |
  | steps       | `StepperStep[]`                                                     | -       | Array of step objects     |
  | currentStep | `number`                                                            | -       | Current active step index |
  | variant     | `"compact" \| "timeline" \| "vertical" \| "underline" \| "numeric"` | -       | Stepper variant           |
  | label       | `string`                                                            | -       | Optional label            |
  | className   | `string`                                                            | -       | Additional CSS classes    |
</PropsTable>

### StepperStep

<PropsTable>
  | Prop        | Type                                    | Default | Description      |
  | :---------- | :-------------------------------------- | :------ | :--------------- |
  | title       | `string`                                | -       | Step title       |
  | description | `string`                                | -       | Step description |
  | status      | `"complete" \| "current" \| "upcoming"` | -       | Step status      |
</PropsTable>