UI Skillbook
2

Stepper

An ordered list of steps showing which are done, current, open or blocked, with optional clickable steps.

UI SkillbookSiteplane docsSiteplane UI 1.8.1
Works withClaude CodeCodexCursorOpenCodeUniversal
Install

Run npx uiskillbook get siteplane-stepper and follow the Siteplane Stepper skill it prints for this task.

Paste this into your agent.

Stepper shows progress through a sequence such as onboarding or setup, and can reveal the content of the step that is open. It is a display and navigation aid; your app decides when a step is complete.

Install

bashnpx shadcn@4.18.0 add @siteplane/stepper

Import it from @/siteplane/components/stepper. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

  • vs Timeline: Pick Timeline for past events in date order rather than steps someone moves through.
  • vs Progress: Pick Progress when only a percentage matters and the steps have no names.

Rules

  • Use StepperItem for read-only steps and StepperButtonItem for every step people can open, without mixing the two for the same step.
  • Set status (done, current, open, blocked) for progress and active on a button item for which step is open; they are independent.
  • Pass children to show content under a step; it sits outside the button, so it can hold fields and links.
  • Keep or translate statusLabel, because done and blocked appear only as icons.
  • Collapsed step content turns inert, so shift focus forward yourself once a step closes.

Reference

  • Stepper docs, with every prop, part and example (Markdown)
  • Siteplane UI 1.8.1, Data display. Read the installed source under src/siteplane before relying on an API.

Add to your agent

Print this skill from the terminal, or connect the whole catalog over MCP. Setup guides

CLI

npx uiskillbook get siteplane-stepper

MCP server

https://www.uiskillbook.com/mcp

Questions

Related skills

Form Field Validation Timingby UI Skillbook

Validate at the right moment — not on every keystroke, not only on submit.

Forms

Navigation Active Statesby UI Skillbook

Make it unambiguous where the user is, at every level of nested navigation.

Navigation

Siteplane Attachmentby UI Skillbook

A card for a file or image attached to a message or draft, with upload states and actions.

Siteplane UI

Siteplane Autocompleteby UI Skillbook

A text input that suggests completions while still accepting whatever the person types.

Siteplane UI

Back to Siteplane UI