The library is still in early development. Breaking changes and bugs may occur without prior notice. Thanks for your interest in using the library!
A component that displays progress through a sequence of logical and numbered steps.
Cart
Shipping
Payment
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>
A simple stepper with default styling. Use the activeStep
prop to control the current step.
Cart
Shipping
Payment
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
Interview
Offer
Customize the appearance of each step using the classes
prop in each subcomponent.
Account
Profile
Preferences
Prop | Type | Default | Description |
---|---|---|---|
activeStep | number | 0 | 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. |
Prop | Type | Default | Description |
---|---|---|---|
root | string | - | Styles applied to the root element of the Stepper. Use this to customize the container that wraps all steps. |
Prop | Type | Default | Description |
---|---|---|---|
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 | number | 0 | The position of the step. |
Prop | Type | Default | Description |
---|---|---|---|
root | string | - | Styles applied to the root element of the Step. Use this to customize the container of each individual step. |
Prop | Type | Default | Description |
---|---|---|---|
classes | StepLabelClasses | - | Override or extend the styles applied to the component. |
Prop | Type | Default | Description |
---|---|---|---|
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. |
Prop | Type | Default | Description |
---|---|---|---|
classes | StepConnectorClasses | - | Override or extend the styles applied to the component. |
Prop | Type | Default | Description |
---|---|---|---|
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. |