Steps

The Steps component renders a vertical sequence of numbered steps with a connecting line. Use it any time you're guiding readers through a multi-step process where the order matters and each step has meaningful content.

When to use Steps

Steps work well for:

Installation sequences - Where each action builds on the previous one
Configuration workflows - Setting up a service in order
Migration guides - Where the order prevents data loss or downtime
Deployment checklists - Pre-deploy steps that must happen in sequence

Avoid Steps for simple bullet lists where the order doesn't actually matter. A plain Markdown list is cleaner and faster to scan when sequence isn't meaningful.

Basic usage

<Steps>
  <Step title="Install the package">
    Run the install command in your project root.
  </Step>
  <Step title="Add your API key">
    Create a `.env.local` file and add your key.
  </Step>
  <Step title="Import and use">
    Import the client and make your first request.
  </Step>
</Steps>

Props

Steps

Prop	Type	Description
`children`	`React.ReactNode`	One or more `Step` components

Step

Prop	Type	Description
`title`	`string`	Short label for this step, displayed as a heading
`children`	`React.ReactNode`	Body content - supports paragraphs, inline code, callouts, and tabs

The step numbers are rendered automatically - you don't set them manually. The steps are numbered in the order they appear in the JSX.

Live example - deploying to production

Here's a realistic 4-step deployment workflow that shows Steps with callouts and package manager options:

Run the test suite

Before deploying, confirm all tests pass locally. Run pnpm test --run from the project root. If you've changed authentication or payment flows, also run pnpm test:e2e.

Do not skip this step if you've made changes to authentication or payment flows. A broken deploy to production can affect live users.

Build the production bundle

Generate the static output with pnpm build. Watch the terminal for TypeScript errors or missing environment variables. The build exits with a non-zero code if something is wrong, so your CI pipeline will catch it too.

Preview the build locally

Before pushing, serve the out/ directory and click through the critical paths. Run cd out && python3 -m http.server 3002 and open http://localhost:3002.

Verify that search works (it won't in dev mode), that navigation links resolve, and that no pages show blank content.

Push and deploy

Push your branch, open a pull request, and merge to main. Your CI pipeline will build and deploy automatically.

After merge, monitor the deployment in your host's dashboard. For Vercel, check the Deployments tab for build logs and any runtime errors.

Set up a Slack or email notification for failed deployments so you catch regressions immediately rather than from a user report.

Nesting Tabs inside Steps

Step children support the Tabs component. This is the most common nesting pattern - showing package manager commands at a specific step in a workflow:

<Steps>
  <Step title="Install the CLI">
    <Tabs>
  <Tab label="pnpm"><pre><code>pnpm add -g @acme/cli</code></pre></Tab>
  <Tab label="npm"><pre><code>npm install -g @acme/cli</code></pre></Tab>
  <Tab label="yarn"><pre><code>yarn global add @acme/cli</code></pre></Tab>
</Tabs>
  </Step>
  <Step title="Authenticate">
    Run `acme login` and follow the browser prompt.
  </Step>
  <Step title="Initialize your project">
    Run `acme init` in your project root. This creates an `acme.config.ts` file with your project settings.
  </Step>
</Steps>

Which renders as:

Install the CLI

pnpm add -g @acme/cli

Authenticate

Run acme login and follow the browser prompt.

Initialize your project

Run acme init in your project root. This creates an acme.config.ts file with your project settings.

Tips for writing good steps

Keep step titles short and action-oriented. Titles like "Install dependencies" and "Configure authentication" are better than "Step 1: You need to install the dependencies first."

One logical action per step. If a step has three unrelated things in it, consider splitting it. Readers lose their place when steps are too long.

Put the command or primary action first. Readers scan for the thing they need to do - explanations can follow the action.