Component

Stepper

Multi-step wizard with progress indicator.

tsx
import { Stepper, StepContent, StepActions, useStepper } from 'wss3-forge'

Usage

useStepper hook for step management

StepContent for conditional rendering

StepActions for navigation buttons

Supports vertical orientation


Account
Profile
Review

Examples

Horizontal Stepper

Account
Profile
Review
tsx
1<Stepper
2 steps={[
3 { id: 'account', title: 'Account' },
4 { id: 'profile', title: 'Profile' },
5 { id: 'review', title: 'Review' }
6 ]}
7 currentStep={0}
8/>

Step 2 Active

Account
Profile
Review
tsx
1<Stepper
2 steps={[
3 { id: 'account', title: 'Account' },
4 { id: 'profile', title: 'Profile' },
5 { id: 'review', title: 'Review' }
6 ]}
7 currentStep={1}
8/>

Completed Steps

Account
Profile
Review
tsx
1<Stepper
2 steps={[
3 { id: 'account', title: 'Account' },
4 { id: 'profile', title: 'Profile' },
5 { id: 'review', title: 'Review' }
6 ]}
7 currentStep={2}
8/>

Previous

Pills

Next

Tabs

Last updated: December 2025

Cookies

We use cookies to improve your experience and save your preferences.