Step

Overview

Step renders a numbered procedure on a published docs page. Each action in the procedure is one StepItem with a title, and the body of that item holds the text, code blocks, and tabs for that action. The renderer numbers the items in order.

Use Step for sequential work such as installation, setup, or a deployment sequence. For lists that are not ordered, use a Markdown list instead.

Props

Basic usage

Wrap every action in a StepItem inside one Step. Leave a blank line before and after each code fence inside a StepItem.

<Step>
  <StepItem title="Install the package">
    Add the client library to your project.

    ```bash
    npm install @acme/widget
    ```
  </StepItem>

  <StepItem title="Create a client">
    Create one client and reuse it across your code.

    ```ts
    import \{ Widget \} from "@acme/widget";

    const widget = new Widget(\{ apiKey: process.env.WIDGET_API_KEY \});
    ```
  </StepItem>
</Step>

The published page shows the two actions as steps 1 and 2, each with its title, text, and code block.

Rules for writing steps

• Every child of Step must be a StepItem.

• Put text, code blocks, and Tabs inside the StepItem they belong to, not directly inside Step.

• Do not pass a title prop to Step. It has no such prop, and the renderer drops it. Each paragraph and code block outside a StepItem is then numbered as a separate step.

• Do not use StepItem outside a Step.

• Give every StepItem a title that describes an action.

The following pattern is wrong. It renders untitled steps, with one number for each paragraph and code block:

<Step title="Install the package">

```bash
npm install @acme/widget
```

</Step>

Alternatives inside a step

When one action has more than one valid path, such as a choice of package manager, put a Tabs component inside that StepItem. Each tab then holds one alternative. See Tabs for the tab syntax.

Related components