Stepper

A multi-step progress indicator that shows completed, current, and upcoming steps. Supports horizontal and vertical orientations with connector lines and optional step descriptions.

Account
Create your account
2
Profile
Set up your profile
3
Billing
Add payment method
4
Confirm
Review and confirm

Step 2 of 4

import { Stepper } from "@aetherstack/patterns"

Installation

terminal

npx aether-ui add stepper

Import

import.tsx

import { Stepper } from "@aetherstack/patterns"
import type { StepperItem } from "@aetherstack/patterns"

Usage

stepper.tsx

import * as React from "react"
import { Stepper } from "@aetherstack/patterns"

const steps = [
  { id: "account", label: "Account",  description: "Create your account" },
  { id: "profile", label: "Profile",  description: "Set up your profile" },
  { id: "billing", label: "Billing",  description: "Add payment method" },
  { id: "confirm", label: "Confirm",  description: "Review and confirm" },
]

export function MyWizard() {
  const [currentStep, setCurrentStep] = React.useState(0)
  return (
    <>
      <Stepper steps={steps} currentStep={currentStep} orientation="horizontal" />
      {/* render step content … */}
    </>
  )
}

Props

Prop	Type	Default	Description
steps*	StepperItem[]	—	Array of steps. Each item needs id, label, and optional description.
currentStep*	number	—	Zero-based index of the active step. Steps below it are rendered as completed.
orientation	"horizontal" \| "vertical"	"horizontal"	Layout direction of the stepper.
className	string	—	Additional classes on the <ol> element.

* Required

Accessibility

→Rendered as an <ol aria-label="Progress steps"> — correct semantic structure for an ordered sequence.
→The active step circle receives aria-current="step".
→Completed steps show a checkmark icon (aria-hidden) instead of a number.
→Connector lines are aria-hidden decorative elements.