Components/Stepper

Stepper

Visual progress indicator for multi-step flows. Supports horizontal and vertical orientations.

Account

Profile

Billing

Confirm

Step 2 of 4

Installation

npx ajaxui add stepper

Vertical

Account

Create your account

Profile

Tell us about you

Billing

Add a payment method

Confirm

Review and finish

Progress states

Account

Profile

Billing

Confirm

Account

Profile

Billing

Confirm

Account

Profile

Billing

Confirm

Props

Prop	Type	Default
current	number	—
steps	StepperStep[]	—
orientation	"horizontal" \| "vertical"	"horizontal"
onStepClick	(index: number) => void	—

StepperStep: { title: string; description?: string; icon?: ReactNode; optional?: boolean }

Anatomy

<Stepper                   // single component
  current={n}              // 0-based active index
  steps={steps}            // [{ title, description?, icon?, optional? }]
  onStepClick={(i) => ...} // makes earlier steps clickable
/>