Steps
Numbered, sequenced instructions — circle markers with auto-counting and connecting lines.
Installation
npx nimbus-docs add steps yarn dlx nimbus-docs add steps pnpm dlx nimbus-docs add steps bunx 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 |