Stepper

Starter

Multi-step workflow navigation.

navigationworkflowsteps

Import

import { Stepper, Step } from "@/components/ui";

Basic Usage

Stepper Preview

AccountCreate your account

ProfileSet up your profile

ReviewReview and submit

Code

tsx

<Stepper activeStep={1}>
  <Step title="Account" description="Create your account" />
  <Step title="Profile" description="Add your details" />
  <Step title="Complete" description="Finish setup" />
</Stepper>

Vertical Orientation

Stack steps vertically

1<Stepper activeStep={1} orientation="vertical">
2  <Step title="Order Placed" description="January 15, 2024" />
3  <Step title="Processing" description="January 16, 2024" />
4  <Step title="Shipped" description="Pending" />
5  <Step title="Delivered" description="Pending" />
6</Stepper>

Clickable Steps

Allow navigation between steps

1<Stepper activeStep={step} clickable onStepClick={setStep}>
2  <Step title="Cart" />
3  <Step title="Shipping" />
4  <Step title="Payment" />
5  <Step title="Confirm" />
6</Stepper>

With Status

Show step status

1<Stepper activeStep={2}>
2  <Step title="Account" status="completed" />
3  <Step title="Profile" status="completed" />
4  <Step title="Verification" status="current" />
5  <Step title="Complete" status="pending" />
6</Stepper>

Ready to use this component?

Configure your app with the features you need and download production-ready code.

Start Configuring