Layout/Stepper

Stepper

A multi-step progress indicator for wizard flows. Animated fill line, completed state with checkmarks, and both horizontal and vertical layouts.

import { Stepper } from "@animui/ui"

Horizontal (interactive)

Account

Profile

3

Billing

4

Confirm

Vertical

Account

Profile

3

Billing

4

Confirm

With descriptions

Account

Set up your credentials

2

Profile

Tell us about yourself

3

Billing

Choose a plan

Props

PropTypeDefaultDescription
stepsStep[]Array of { id, label, description? } step definitions.
currentStepnumber0Zero-based index of the current active step.
orientation"horizontal" | "vertical""horizontal"Layout direction of the stepper.
classNamestringAdditional classes for the wrapper.
© 2026 Steal Shadow. MIT License.Report an issue