Steps | Nimbus

Installation

Included in the starter. Every new site has it in src/components/ui/steps/. Import it where you need it, or register it in src/components.ts to use it on every page. If your site predates it, install it:

npx @cloudflare/nimbus-docs add steps

yarn nimbus-docs add steps

pnpm nimbus-docs add steps

bunx @cloudflare/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`
`title`	`string`