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.

'use client';

import { Stepper } from 'rizzui/stepper';

Simple Stepper

A simple stepper with component Stepper and Step.

1

Step 1

This is a description

2

Step 2

This is a description

3

Step 3

This is a description

'use client';

import { Stepper } from 'rizzui/stepper';

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

With Outline Variant

You can use outline variant with Stepper.

1

Step 1

This is a description

2

Step 2

This is a description

3

Step 3

This is a description

'use client';

import { Stepper } from 'rizzui/stepper';

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

With Custom Icons

You can use custom icon inside Stepper and Step.

Login

Verification

Pay

Done

'use client';

import { Stepper } from 'rizzui/stepper';

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

With Colors

You can use colors with Stepper.

Step 1

This is a description

2

Step 2

This is a description

3

Step 3

This is a description

'use client';

import { Stepper } from 'rizzui/stepper';

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

With Error Message Step

You can use error step with Step component.

Step 1

This is a description

Step 2

This is a description

3

Step 3

This is a description

'use client';

import { Stepper } from 'rizzui/stepper';

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

With Functional

You can use functional with Stepper and Step.

1

Step 1

This is a description

2

Step 2

This is a description

3

Step 3

This is a description

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

API Reference

---

Stepper Props

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

Props	Type	Description	Default
currentIndex	number	Index of currently active step	0
direction	StepperDirections	Direction of stepper	"horizontal"
dot	boolean	Whether to show dot	false
children	ReactNode	Pass Step Component as children	__

Stepper Directions

type StepperDirection = 'vertical' | 'horizontal';

Step Props

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

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	Status of each step	__
size	StepSizes	The size of each Step	"md"
variant	StepVariants	The variants of the component	"solid"
color	StepColors	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	__

Step Status

type StepStatus = 'error' | 'waiting' | 'in-progress' | 'completed';

Step Sizes

type StepSizes = 'sm' | 'md' | 'lg';

Step Variants

type StepVariants = 'solid' | 'outline';

Step Colors

type StepColors =
  | 'primary'
  | 'secondary'
  | 'danger'
  | 'info'
  | 'success'
  | 'warning';