Stepper

Markdown

A step indicator for series and multi-step paths, as dots or a list, with optional links.

Use it for
Showing position in a multi-step flow.
Not for
A hierarchy of pages. Try Breadcrumb or Progress.

Stepper preview

Loading example…

Installation

npm install @stackunseen/ui
import { Stepper } from '@stackunseen/ui';
Styles: @stackunseen/ui/styles.css

Usage and props

Pass the current step from your route or app state. Planned steps have no destination; the reading prints "Step 2 of 9" from the current step.

Supported inputs

This is the public signature used by this example. Open Code to see how the values and callbacks fit together.

label · steps: { id, label, href?, state?: done | current | upcoming | planned | available }[] · presentation?: dots | list | segments · previous? · next? · reading? · tooltip? · as?: nav | div
How state and callbacks work
All props

Loading…

For your coding agent

Give the agent this page instead of a screenshot. The prompt wraps the page with the install and import lines and the rule that your server, not a click, completes an action.

Contract
label · steps: { id, label, href?, state?: done | current | upcoming | planned | available }[] · presentation?: dots | list | segments · previous? · next? · reading? · tooltip? · as?: nav | div
Keeps honest
Pass the current step from your route or app state. Planned steps have no destination; the reading prints "Step 2 of 9" from the current step.
MCP
read_component "Stepper" on the docs endpoint
Open the Markdown file

Keyboard and customization

Keyboard

Steps with destinations are ordinary links in a navigation landmark; dots carry their labels for assistive technology.

Customization

Change shared colors, spacing, corners and icons with the theme. Use the component's supported props to adapt its content and layout. Customization guide and Theme Studio