For AI agents: the documentation index is at /llms.txt, and any docs page is available as Markdown by appending .md to its URL.

Stepper

Verified

Progress through a multi-step flow, with the current step marked for assistive technology.

Cart
Complete
PaymentCard or invoice
Current step
Review
Upcoming

When to use

Use when: Showing where someone is in a multi-step flow such as checkout.
Avoid when: An agent's plan; use Plan. Tabbed content; use Tabs.

Installation

bunx shelf add stepper

The source lands in src/components/ui/stepper.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.

Usage

import * as Stepper from "@/components/ui/stepper";

<Stepper.Root aria-label="Checkout">
  <Stepper.Step status="complete"><Stepper.Title>Cart</Stepper.Title></Stepper.Step>
  <Stepper.Step status="current"><Stepper.Title>Payment</Stepper.Title></Stepper.Step>
  <Stepper.Step><Stepper.Title>Review</Stepper.Title></Stepper.Step>
</Stepper.Root>

Built on

Packages: @stylexjs/stylex
Shelf items: foundations, Icons, utils
Figma: Optional native Figma library. See Designers.

Verified

Size: 1.6 kB gzipped on its own, 4.7 kB with the Shelf items and packages it builds on. JS and CSS in a production build, without React.
Accessibility: Axe passes on 1 story
Behavior: 1 interaction test in Storybook
React Compiler: Compiles with React Compiler
React Doctor: React Doctor finds nothing