Steps

Present a numbered sequence of instructions with a connecting line.

Steps render an ordered procedure. Each step gets a numbered marker on the left and a vertical line that connects it to the next one.

Usage#

Install the package#

Add pzzadocs with your package manager.

bash

pnpm add pzzadocs

Create the config#

Export a defineConfig call from docs.config.ts.

Add the routes#

Create the layout, page, and search route files described in Installation.

mdx

<Steps>
  <Step>
    ### Install the package

    Add `pzzadocs` with your package manager.

```bash
pnpm add pzzadocs
```
  </Step>
  <Step>
    ### Create the config

    Export a `defineConfig` call from `docs.config.ts`.
  </Step>
  <Step>
    ### Add the routes

    Create the layout, page, and search route files.
  </Step>
</Steps>

Headings inside steps#

Starting each step with an ### heading gives it a title that also appears in the table of contents, so readers can jump straight to a step. Plain paragraphs work too when the steps are short.

Open the project in your editor.

Run pnpm dev and visit http://localhost:3000/docs.

Edit a file in content/docs and watch the page refresh.

mdx

<Steps>
  <Step>Open the project in your editor.</Step>
  <Step>Run `pnpm dev` and visit `http://localhost:3000/docs`.</Step>
  <Step>Edit a file in `content/docs` and watch the page refresh.</Step>
</Steps>

Props#

Steps#

Prop	Type	Description
`children`	`ReactNode`	A list of `Step` elements.

Step#

Prop	Type	Description
`children`	`ReactNode`	Step content. Numbering is automatic.