Matrix logo

Steps

Break multi-step processes into numbered instructions with Steps and Step components. Each step gets a title and supports rich Markdown content.

Use Steps for ordered instructions that the reader follows in sequence.

1
Install the CLI
npm install -g matrix-cli
2
Initialize your project
matrix init my-project
3
Start writing

Create .mdx files in your project. Each file becomes a page in your docs.

Usage

<Steps>
  <Step title="First step">

    Description of what to do.

</Step>
  <Step title="Second step">

    Next instruction.

</Step>
  <Step title="Third step">

    Final instruction.

</Step>
</Steps>

Each Step requires a title prop. The content inside supports full Markdown: code blocks, lists, callouts, images, and links.

When to use Steps

Use Steps when the reader must do the work in order. If the reader picks one path from several alternatives, use Tabs instead. If most readers will skip the content, use an AccordionGroup.

Steps work well for setup guides, tutorials, getting-started flows, and any process with a defined sequence.