Navigation & structure

Steps / Stepper

Q: How do people describe a Steps / Stepper in plain words?

the 1-2-3 bar at the top of a checkout wizard circles connected by lines showing which step I’m on that progress strip for multi-page forms

Q: How do I implement a Steps / Stepper?

Build steps as an with aria-current="step" on the active item; completed steps are buttons that navigate back; future steps are plain text. On narrow viewports show “Step 2 of 4” plus the current title.

Visualize a multi-step flow: done, current, and upcoming.

Also known as step indicator · wizard steps · progress steps

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Steps / Stepper".

Build steps as an <ol> with aria-current="step" on the active item; completed steps are buttons that navigate back; future steps are plain text. On narrow viewports show “Step 2 of 4” plus the current title.

Anatomy:
- step indicator: Number or check in a circle.
- connector: Line between nodes; completed segment often themed.
- step title: Name the action—“Shipping”—not “Step 1.”
- current step: aria-current="step".

Preferred API / pattern: `custom stepper / wizard headers`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

○Avoid: Future steps clickable
○Avoid: Status by color only
○Avoid: Six-plus horizontal steps on mobile
○Avoid: Titles like “Step 1”

In plain wordsHow people search for it

“the 1-2-3 bar at the top of a checkout wizard”“circles connected by lines showing which step I’m on”“that progress strip for multi-page forms”

AnatomyOpen for part names

step indicator: Number or check in a circle.
connector: Line between nodes; completed segment often themed.
step title: Name the action—“Shipping”—not “Step 1.”
current step: aria-current="step".

How to write itOpen for stack patterns

Web (HTML/CSS)<ol> + aria-current="step"

React + Tailwind + shadcn/uicustom stepper / wizard headers

SwiftUIcustom; TabView page style for simple cases

Ant Design<Steps current items />

Notes

Navigable wizards (click back to edit) vs read-only status (tracking). Only completed steps should be buttons. More than five steps wants grouping or another pattern. On small screens, collapse to “Step 2 of 4” instead of crushing a horizontal rail.

Common mistakesHumans and models trip here

Future steps clickable: users skip required earlier data.
Status by color only: checks and weight for current/done.
Six-plus horizontal steps on mobile: unreadable—collapse the chrome.
Titles like “Step 1”: say what the step does.

More failure symptoms on AI broke it.

Related patterns

Progress Bar / IndicatorA determinate (or sometimes indeterminate) bar showing how far a task has gone.Form FieldOne complete input unit: label, control, placeholder, helper text, and error message.BreadcrumbA trail of links showing the path from the root to the current page.TimelineEvents laid out along a vertical line in time order—logs, shipping, history.

Spotted a wrong name or missing pattern?

Message on X