Stepper

Stepper

Horizontal (Default)

Account

Create your account

2

Profile

Set up your profile

3

Review

Review and submit

Vertical

Order placed

Your order has been placed

Processing

We are processing your order

3

Shipping

Your order is on the way

4

Delivered

Package delivered

Simple Steps

Step 1

Step 2

3

Step 3

4

Step 4

5

Step 5

Usage

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

<Stepper>
  <Step title="Step 1" status="completed" />
  <Step title="Step 2" status="current" />
  <Step title="Step 3" status="upcoming" />
</Stepper>

With Descriptions

Add descriptions to provide more context for each step:

<Stepper>
  <Step title="Account" description="Create your account" status="completed" />
  <Step title="Profile" description="Set up your profile" status="current" />
  <Step title="Review" description="Review and submit" status="upcoming" />
</Stepper>

Vertical Orientation

Use orientation="vertical" for vertical layouts:

<Stepper orientation="vertical">
  <Step title="Order placed" status="completed" />
  <Step title="Processing" status="completed" />
  <Step title="Shipping" status="current" />
  <Step title="Delivered" status="upcoming" />
</Stepper>

Rich Content

Use the children prop to render rich content inside the step body. Content is wrapped in a .step-body element for styling:

<Stepper orientation="vertical">
  <Step title="Select plan" status="completed">
    <p>You selected the Pro plan at $19/month.</p>
  </Step>
  <Step title="Payment details" status="current">
    <form>
      <input type="text" placeholder="Card number" class="input" />
      <button type="submit" class="btn">Continue</button>
    </form>
  </Step>
  <Step title="Confirmation" status="upcoming" />
</Stepper>

Step Status

Each step can have one of three statuses:

• completed - Step has been finished
• current - Currently active step
• upcoming - Step not yet reached

Props

Stepper

Prop	Type	Default	Description
orientation	"horizontal" | "vertical"	"horizontal"	Layout direction of steps

Step

Prop	Type	Default	Description
title	string	-	The step title (required)
description	string	-	Optional description text below the title
status	"completed" | "current" | "upcoming"	"upcoming"	The step’s status
icon	JSX.Element	-	Custom icon to display in the indicator
children	JSX.Element	-	Rich content to render inside the step body
number	number	-	Explicit step number (auto-increments if not provided)
orientation	"horizontal" | "vertical"	-	Explicit orientation (uses context if not provided)

CSS Classes

Class	Description
.step	Base step container
.step-indicator	The numbered/icon circle
.step-content	Wrapper for title, description, and body
.step-title	Step title text
.step-description	Step description text
.step-body	Wrapper for rich content passed via children
.step-connector	Line connecting steps