---
sidebar_position: 34
---

import { Stepper } from "rizzui";
import {
  UserIcon,
  DocumentMagnifyingGlassIcon,
  CreditCardIcon,
  FaceSmileIcon,
} from "@heroicons/react/24/outline";
import FunctionalStepper from "@site/src/components/stepper";
import Paper from "@site/src/components/paper";

# Stepper

Stepper tool is used to enlighten user regarding the progress of the task. **Stepper** component displays the progress of the task in a sequence of numbered steps through **Step** component.

```tsx
"use client"; 

import { Stepper } from "rizzui";
```

<div className="mb-20 md:mb-28" />

## Simple Stepper

A simple stepper with component **Stepper** and **Step**.

<Paper>
  <Stepper className="w-full">
    <Stepper.Step title="Step 1" description="This is a description" />
    <Stepper.Step title="Step 2" description="This is a description" />
    <Stepper.Step title="Step 3" description="This is a description" />
  </Stepper>
</Paper>

```tsx
"use client"; 

import { Stepper } from "rizzui";

export default function App() {
  return (
    <Stepper>
      <Stepper.Step title="Step 1" description="This is a description" />
      <Stepper.Step title="Step 2" description="This is a description" />
      <Stepper.Step title="Step 3" description="This is a description" />
    </Stepper>
  );
}
```

<div className="mb-16" />

## With Outline Variant

You can use outline variant with **Stepper**.

<Paper>
  <Stepper dot currentIndex={1} className="w-full">
    <Stepper.Step
      variant="outline"
      color="primary"
      title="Step 1"
      description="This is a description"
    />
    <Stepper.Step
      variant="outline"
      color="primary"
      title="Step 2"
      description="This is a description"
    />
    <Stepper.Step
      variant="outline"
      color="primary"
      title="Step 3"
      description="This is a description"
    />

  </Stepper>
</Paper>

```tsx
"use client"; 

import { Stepper } from "rizzui";

export default function App() {
  return (
    <Stepper dot currentIndex={1}>
      <Stepper.Step
        variant="outline"
        color="primary"
        title="Step 1"
        description="This is a description"
      />

      <Stepper.Step
        variant="outline"
        color="primary"
        title="Step 2"
        description="This is a description"
      />

      <Stepper.Step
        variant="outline"
        color="primary"
        title="Step 3"
        description="This is a description"
      />
    </Stepper>
  );
}
```

<div className="mb-16" />

## With Custom Icons

You can use custom icon inside **Stepper** and **Step**.

<Paper>
  <Stepper currentIndex={2} className="w-full">
    <Stepper.Step
      variant="outline"
      title="Login"
      icon={<UserIcon className="h-5 w-5" />}
    />
    <Stepper.Step
      variant="outline"
      title="Verification"
      icon={<DocumentMagnifyingGlassIcon className="h-5 w-5" />}
    />
    <Stepper.Step
      variant="outline"
      title="Pay"
      icon={<CreditCardIcon className="h-5 w-5" />}
    />
    <Stepper.Step
      variant="outline"
      title="Done"
      icon={<FaceSmileIcon className="h-5 w-5" />}
    />
  </Stepper>
</Paper>

```tsx
"use client"; 

import { Stepper } from "rizzui";

export default function App() {
  return (
    <Stepper currentIndex={2} className="w-full">
      <Stepper.Step
        variant="outline"
        title="Login"
        icon={<UserIcon className="h-5 w-5" />}
      />
      <Stepper.Step
        variant="outline"
        title="Verification"
        icon={<DocumentMagnifyingGlassIcon className="h-5 w-5" />}
      />
      <Stepper.Step
        variant="outline"
        title="Pay"
        icon={<CreditCardIcon className="h-5 w-5" />}
      />
      <Stepper.Step
        variant="outline"
        title="Done"
        icon={<FaceSmileIcon className="h-5 w-5" />}
      />
    </Stepper>
  );
}
```

<div className="mb-16" />

## With Colors

You can use colors with **Stepper**.

<Paper>
  <Stepper currentIndex={1} className="w-full">
    <Stepper.Step
      color="primary"
      title="Step 1"
      description="This is a description"
    />
    <Stepper.Step
      color="primary"
      title="Step 2"
      description="This is a description"
    />
    <Stepper.Step
      color="primary"
      title="Step 3"
      description="This is a description"
    />
  </Stepper>
</Paper>

```tsx
"use client"; 

import { Stepper } from "rizzui";

export default function App() {
  return (
    <Stepper>
      <Stepper.Step description="This is a description" title="Step 1" />
      <Stepper.Step description="This is a description" title="Step 2" />
      <Stepper.Step description="This is a description" title="Step 3" />
    </Stepper>
  );
}
```

<div className="mb-16" />

## With Error Message Step

You can use error step with **Step** component.

<Paper>
  <Stepper currentIndex={1} className="w-full">
    <Stepper.Step title="Step 1" description="This is a description" />
    <Stepper.Step
      status="error"
      color="danger"
      title="Step 2"
      description="This is a description"
    />
    <Stepper.Step title="Step 3" description="This is a description" />
  </Stepper>
</Paper>

```tsx
"use client"; 

import { Stepper } from "rizzui";

export default function App() {
  return (
    <Stepper currentIndex={1}>
      <Stepper.Step title="Step 1" description="This is a description" />

      <Stepper.Step
        status="error"
        color="danger"
        title="Step 2"
        description="This is a description"
      />

      <Stepper.Step title="Step 3" description="This is a description" />
    </Stepper>
  );
}
```

<div className="mb-16" />

## With Functional

You can use functional with **Stepper** and **Step**.

<Paper>
  <FunctionalStepper />
</Paper>

```tsx
"use client"; 

import React from "react";
import { Stepper, Button } from "rizzui";

export default function App() {
  const [currentStep, setCurrentStep] = React.useState(0);
  return (
    <>
      <Stepper currentIndex={currentStep}>
        <Stepper.Step title="Step 1" description="This is a description" />
        <Stepper.Step title="Step 2" description="This is a description" />
        <Stepper.Step title="Step 3" description="This is a description" />
      </Stepper>

      <div className="mt-7 flex space-x-4">
        <Button
          disabled={currentStep === 3}
          onClick={() => setCurrentStep(currentStep + 1)}
        >
          Next
        </Button>

        {currentStep === 3 && (
          <Button onClick={() => setCurrentStep(0)}>Reset</Button>
        )}
      </div>
    </>
  );
}
```

<div className="mb-20" />

## API Reference

<hr />

<div className="mb-10" />

### Stepper Props

Here is the API documentation of the Stepper component. You can use the following props to create a Stepper.

<div className="overflow-x-auto">

|    Props     |                   Type                   |           Description           |    Default     |
| :----------: | :--------------------------------------: | :-----------------------------: | :------------: |
| currentIndex |                 `number`                 | Index of currently active step  |      `0`       |
|  direction   | [StepperDirections](#stepper-directions) |      Direction of stepper       | `"horizontal"` |
|     dot      |                `boolean`                 |       Whether to show dot       |    `false`     |
|   children   |               `ReactNode`                | Pass Step Component as children |      \_\_      |

</div>

<div className="mb-10" />

### Stepper Directions

```ts
type StepperDirection = "vertical" | "horizontal";
```

<div className="mb-20" />

### Step Props

Here is the API documentation of the Step component. You can use the following props to create a Step.

<div className="overflow-x-auto">

|        Props         |              Type              |                                Description                                 |   Default   |
| :------------------: | :----------------------------: | :------------------------------------------------------------------------: | :---------: |
|        title         |          `ReactNode`           |                         Give a title for the step                          |    \_\_     |
|     description      |          `ReactNode`           |                      Give a description for the step                       |    \_\_     |
|         icon         |          `ReactNode`           |                              Pass custom icon                              |    \_\_     |
|        index         |            `number`            | Index number for each component. Handled underneath by `Stepper` component |     `0`     |
|        status        |   [StepStatus](#step-status)   |                            Status of each step                             |    \_\_     |
|         size         |    [StepSizes](#step-sizes)    |                           The size of each Step                            |   `"md"`    |
|       variant        | [StepVariants](#step-variants) |                       The variants of the component                        |  `"solid"`  |
|        color         |   [StepColors](#step-colors)   |                             Change Step Color                              | `"primary"` |
|         dot          |           `boolean`            |           Whether to show dot. Handled from `Stepper` component            |    \_\_     |
|      className       |            `string`            |                   Pass className to design the container                   |    \_\_     |
|   circleClassName    |            `string`            |              Pass circleClassName to design the rounded disc               |    \_\_     |
|   contentClassName   |            `string`            |                Pass contentClassName to design the content                 |    \_\_     |
|    titleClassName    |            `string`            |        Pass titleClassName to design the label or title of the step        |    \_\_     |
| descriptionClassName |            `string`            |      Pass descriptionClassName to design the description of the step       |    \_\_     |

</div>

<div className="mb-10" />

### Step Status

```ts
type StepStatus = "error" | "waiting" | "in-progress" | "completed";
```

<div className="mb-10" />

### Step Sizes

```ts
type StepSizes = "sm" | "md" | "lg";
```

<div className="mb-10" />

### Step Variants

```ts
type StepVariants = "solid" | "outline";
```

<div className="mb-10" />

### Step Colors

```ts
type StepColors =
  | "primary"
  | "secondary"
  | "danger"
  | "info"
  | "success"
  | "warning";
```
