Steps

Usage

<Steps>
  <Step title="Create a project">
    Sign up and create your first documentation project.
  </Step>
  <Step title="Connect GitHub">
    Install the NookDocs GitHub App on your repository.
  </Step>
  <Step title="Deploy">
    Push your MDX files and your docs go live.
  </Step>
</Steps>

The numbers are generated automatically by a CSS counter — you don't pass stepNumber manually. Add or remove steps and the numbering re-counts itself.

Custom step icons

Replace the auto-generated number with a Lucide icon by setting titleIcon. Useful for tutorial flows where each step represents a different concept (install, configure, deploy, verify) and a glyph reads faster than a number.

<Steps>
  <Step titleIcon="download" title="Install the CLI">
    Run `npm install -g nookdocs`.
  </Step>
  <Step titleIcon="settings" title="Configure your project">
    Edit `nookdocs.config.json` with your name and navigation.
  </Step>
  <Step titleIcon="rocket" title="Deploy">
    Push to GitHub and watch the build complete in 30 seconds.
  </Step>
  <Step titleIcon="check" title="Verify">
    Open your subdomain URL on nookdocs.site.
  </Step>
</Steps>

Mixing icons and numbers

You can leave some steps un-iconed and they'll fall back to the counter, but the visual reads better when you commit to one or the other for a single Steps block.

Nested content

Step content can include any other component — code blocks, callouts, cards, even nested Tabs:

<Steps>
  <Step title="Install the package">
    <CodeGroup>
      ```bash npm
      npm install @nookdocs/sdk
      ```
      ```bash yarn
      yarn add @nookdocs/sdk
      ```
    </CodeGroup>

    <Note>
      Requires Node.js 20 or later.
    </Note>
  </Step>
</Steps>

Override step number

The CSS counter handles numbering automatically, but sometimes you need to force a specific number — for example, when continuing a sequence from a previous Steps block:

<Steps>
  <Step title="Review the PR" stepNumber={4}>
    Continuing from the previous section...
  </Step>
  <Step title="Merge to main" stepNumber={5}>
    Once approved, merge the pull request.
  </Step>
</Steps>

Custom anchor IDs

By default each step generates an anchor from its title. Set id to override this, which is useful for linking directly to a specific step:

<Steps>
  <Step title="Configure authentication" id="auth-setup">
    Set up your auth provider credentials.
  </Step>
</Steps>

Link to it with [jump to auth](#auth-setup).

Custom heading level

By default step titles render as <h4>. Set titleSize on the parent to change the heading level:

<Steps titleSize="h2">
  <Step title="First step">
    This title renders as an h2 heading.
  </Step>
  <Step title="Second step">
    Useful for top-level tutorial sections.
  </Step>
</Steps>

Props

Steps

Step