Skip to content

Steps

Numbered, sequenced instructions — circle markers with auto-counting and connecting lines.

Installation

npx nimbus-docs add steps

Preview

Install

Run nimbus-docs add steps to copy the component into your repo.

Compose

Wrap a series of <Step> blocks. Numbers and connectors are automatic.

Author

Use markdown body — code, links, asides all work inside each step.

<Steps>
<Step title="Install">
  Run `nimbus-docs add steps` to copy the component into your repo.
</Step>
<Step title="Compose">
  Wrap a series of `<Step>` blocks. Numbers and connectors are automatic.
</Step>
<Step title="Author">
  Use markdown body — code, links, asides all work inside each step.
</Step>
</Steps>

Examples

Basic

Three Steps with text bodies — counting and connecting lines are automatic.

Clone the repository.
Install dependencies with pnpm install.
Run the dev server with pnpm dev.
<Steps>
<Step>Clone the repository.</Step>
<Step>Install dependencies with `pnpm install`.</Step>
<Step>Run the dev server with `pnpm dev`.</Step>
</Steps>

With titles

Add a title prop for bold lead text, then body content below.

Install

Add the package to your project.

Configure

Edit config.json to match your environment.

Run

Start the dev server and open localhost.
<Steps>
<Step title="Install">
  Add the package to your project.
</Step>
<Step title="Configure">
  Edit `config.json` to match your environment.
</Step>
<Step title="Run">
  Start the dev server and open localhost.
</Step>
</Steps>

Custom start

Use start to continue numbering across a split flow.

Deploy

Push to main; CI builds and deploys.

Verify

Open the deployed URL and confirm the staging banner.
<Steps start={5}>
<Step title="Deploy">
  Push to main; CI builds and deploys.
</Step>
<Step title="Verify">
  Open the deployed URL and confirm the staging banner.
</Step>
</Steps>

API reference

Every prop the component accepts, sourced from a single declaration.

Prop Type
start
number
Components

Type to search…

↑↓ navigate ↵ select Esc close