Stepper

A visual step indicator that shows progress through a multi-step process.

Installation

tsx

import { Stepper, StepperStep } from "madagent";

Basic

Step 1: Account (completed)

Step 2: Profile (current)

Step 3: Review

With Description

Step 1: Account (completed)

Step 2: Profile (current)

Step 3: Billing

Step 4: Confirm

Custom Icons

Step 1: Account (completed)

Step 2: Settings (completed)

Step 3: Billing (current)

Step 4: Security

Vertical

Step 1: Create account (completed)

Step 2: Personal info (current)

Step 3: Choose plan

Step 4: Confirmation

Sizes

Step 1: Account (completed)

Step 2: Profile (current)

Step 3: Done

Step 1: Account (completed)

Step 2: Profile (current)

Step 3: Done

Step 1: Account (completed)

Step 2: Profile (current)

Step 3: Done

Interactive

Error State

Step 1: Upload (completed)

Step 2: Validate (error)

Step 3: Process

Stepper

Prop	Type	Default	Description
`activeStep`	`number`	`0`	Index of the currently active step (0-based)
`orientation`	`"horizontal""vertical"`	`"horizontal"`	Layout direction of the stepper
`size`	`"sm""md""lg"`	`"md"`	Size of the step indicators
`onStepClick`	`(index: number) => void`	-	Callback when a step is clicked. If provided, steps become interactive buttons.
`children`	`ReactNode`	-	StepperStep elements

StepperStep

Prop	Type	Default	Description
`label`	`string`	-	Step title
`description`	`string`	-	Optional subtitle below the label
`icon`	`ReactNode`	-	Custom icon — overrides the default number or checkmark
`error`	`boolean`	`false`	Displays the step in an error state

RTL Support

Components automatically adapt to right-to-left languages using CSS logical properties.

Preview

Step 1: الحساب (completed)

Step 2: الملف الشخصي (current)

Step 3: التأكيد

Usage

tsx

<Stepper activeStep={1} dir="rtl">
  <StepperStep label="الحساب" description="أنشئ حسابك" />
  <StepperStep label="الملف الشخصي" description="أكمل بياناتك" />
  <StepperStep label="التأكيد" description="راجع وأرسل" />
</Stepper>

Vertical

Step 1: Create account (completed)

Step 2: Personal info (current)

Step 3: Choose plan

Step 4: Confirmation

Prop

Type

Default

Description

activeStep

number

0

Index of the currently active step (0-based)

orientation

"horizontal""vertical"

"horizontal"

Layout direction of the stepper

size

"sm""md""lg"

"md"

Size of the step indicators

onStepClick

(index: number) => void

Callback when a step is clicked. If provided, steps become interactive buttons.

children

ReactNode

StepperStep elements

Prop

Type

Default

Description

label

string

Step title

description

string

Optional subtitle below the label

icon

ReactNode

Custom icon — overrides the default number or checkmark

error

boolean

false

Displays the step in an error state

RTL Support

Components automatically adapt to right-to-left languages using CSS logical properties.

Preview

Step 1: الحساب (completed)

Step 2: الملف الشخصي (current)

Step 3: التأكيد

Usage

tsx

<Stepper activeStep={1} dir="rtl">
  <StepperStep label="الحساب" description="أنشئ حسابك" />
  <StepperStep label="الملف الشخصي" description="أكمل بياناتك" />
  <StepperStep label="التأكيد" description="راجع وأرسل" />
</Stepper>