The library is still in early development. Breaking changes and bugs may occur without prior notice. Thanks for your interest in using the library!

v0.2.49Beta

Search

2

Stepper

Source

A component that displays progress through a sequence of logical and numbered steps.

1

Cart

2

Shipping

3

Payment

Usage

Import the Stepper component and its subcomponents from @bun-ui/react:

import { Stepper, Step, StepLabel } from "@bun-ui/react"
<Stepper activeStep={1}>
  <Step>
    <StepLabel>Step 1</StepLabel>
  </Step>
  <Step>
    <StepLabel>Step 2</StepLabel>
  </Step>
  <Step>
    <StepLabel>Step 3</StepLabel>
  </Step>
</Stepper>

Examples

Basic Stepper

A simple stepper with default styling. Use the activeStep prop to control the current step.

1

Cart

2

Shipping

3

Payment

Custom Connector

Customize the connector between steps using the connector prop. This example shows how to create a gradient connector that changes color based on the step state.

Application

2

Interview

3

Offer

Custom Styling

Customize the appearance of each step using the classes prop in each subcomponent.

1

Account

2

Profile

3

Preferences

Props

Stepper

PropTypeDefaultDescription
activeStep
number0

The index of the active step.

classes
StepperClasses-

Override or extend the styles applied to the component.

connector
ReactNode<StepConnector />

A separator element placed between each step.

StepperClasses

PropTypeDefaultDescription
root
string-

Styles applied to the root element of the Stepper. Use this to customize the container that wraps all steps.

Step

PropTypeDefaultDescription
active
boolean-

Set the step as active. If not provided, the step will be active when its index matches the Stepper's activeStep.

classes
StepClasses-

Override or extend the styles applied to the component.

completed
boolean-

Mark the step as completed. If not provided, the step will be completed when its index is less than the Stepper's activeStep.

index
number0

The position of the step.

StepClasses

PropTypeDefaultDescription
root
string-

Styles applied to the root element of the Step. Use this to customize the container of each individual step.

StepLabel

PropTypeDefaultDescription
classes
StepLabelClasses-

Override or extend the styles applied to the component.

StepLabelClasses

PropTypeDefaultDescription
active
string-

Styles applied when the step is active. Use this to customize the appearance of the active step.

completed
string-

Styles applied when the step is completed. Use this to customize the appearance of completed steps.

iconContainer
string-

Styles applied to the icon container. Use this to customize the container that holds the step number or check icon.

label
string-

Styles applied to the label text element. Use this to customize the appearance of the step label text.

root
string-

Styles applied to the root element of the StepLabel. Use this to customize the container that wraps the icon and label.

StepConnector

PropTypeDefaultDescription
classes
StepConnectorClasses-

Override or extend the styles applied to the component.

StepConnectorClasses

PropTypeDefaultDescription
active
string-

Styles applied when the connector is part of an active step. Use this to customize the appearance of the connector leading to the active step.

completed
string-

Styles applied when the connector is part of a completed step. Use this to customize the appearance of the connector leading to completed steps.

root
string-

Styles applied to the root element of the StepConnector. Use this to customize the base appearance of the connector line.

SpinnerSwitch