Navigation · astro-ui · Stepper

Stepper

Ordered progress indicator with complete/current/upcoming states.

Stepper visualizes multi-step progress as a semantic <ol>: numbered markers, ✓ for completed steps, and optional links per step. Connectors are CSS pseudo-elements; states are data-attributes.

← All components

Features

Semantic ol with aria-current="step"
complete/current/upcoming/disabled states
Horizontal + vertical orientations
Optional per-step links
Dots or line connectors

Usage

---
import { Stepper } from "astro-ui";
---

<Stepper
  ariaLabel="Checkout progress"
  items={[
    { label: "Cart", complete: true },
    { label: "Shipping", current: true, description: "Address & delivery" },
    { label: "Payment" },
  ]}
/>

Demos

Basic

Cart
ShippingAddress & delivery
Payment

<Stepper
  items={[
    { label: "Cart", complete: true },
    { label: "Shipping", current: true, description: "Address & delivery" },
    { label: "Payment" },
  ]}
/>

Vertical

Account
Profile
Done

<Stepper orientation="vertical"
  items={[
    { label: "Account", complete: true },
    { label: "Profile", current: true },
    { label: "Done" },
  ]}
/>

API

Props

Prop	Type	Default	Description
`items`	`StepperItem[]`	`[]`	Steps: { label, description?, complete?, current?, disabled?, href? }.
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Layout.
`variant`	`"line" \| "dots"`	`"line"`	Connector style.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Scale.
`ariaLabel`	`string`	`"Progress"`	Group name.
`class`	`string`	`—`	Merged via cn(); Tailwind classes welcome.
`id`	`string`	`—`	Element id.

Accessibility

Implemented accessibility features — semantics, ARIA wiring, and keyboard behavior that ship with the component.

Changelog

Version history mentioning Stepper.

v0.1.0 — 2026-11-11

added

Navigation (7): Tabs, Breadcrumb, Pagination, Stepper, Tree, Navbar, Sidebar.