Octri

Steps

Steps lay out a numbered procedure, with a line joining each step to the next. Use them when the order matters. The numbers come from the order the steps are written in.

Example

  1. Create a key

    Find it under Settings, then API keys.

  2. Store it safely

    Put it in your secret manager, not your code.

  3. Make a request

    Send it in the Authorization header.

mdx
<Steps>
  <Step title="Create a key">
    Find it under **Settings**, then **API keys**.
  </Step>
  <Step title="Store it safely">
    Put it in your secret manager, not your code.
  </Step>
  <Step title="Make a request">
    Send it in the `Authorization` header.
  </Step>
</Steps>

Steps props

childrenStep

The steps, in order. Each one is numbered for you.

Step props

titlestring

The step's heading.

childrenMarkdown

What to do, between the tags. A step can hold code, tables and other components. Leave a blank line after the opening tag and before the closing one.

Code inside a step

A step can hold a code block, or any other component.

  1. Install the SDK
    bash
    npm install acme-api
mdx
<Steps>
  <Step title="Install the SDK">
    ```bash
    npm install acme-api
    ```
  </Step>
</Steps>
  • Check: requirements, where order doesn't matter.
  • Tabs: alternatives a reader picks one of.