---
title: Steps
description: Use Steps and Step to present clear, ordered instructions.
---

Use `Steps` when readers should follow a sequence in order.

<ComponentPreview>
  ```mdx
  <Steps>
    <Step title="Boil water">
      Fill a pot with water and bring it to a boil.
    </Step>
    <Step title="Add pasta">
      Add the pasta and stir for the first 30 seconds.
    </Step>
    <Step title="Drain and serve">
      Drain when al dente, then add sauce and serve.
    </Step>
  </Steps>
  ```
</ComponentPreview>

## Structure

### Use `Steps` and `Step` together

Wrap each `Step` inside `Steps` so numbering and connector lines render correctly.

<ComponentPreview showAllCode>
  ```mdx
  <Steps>
    <Step title="Choose a route">
      Pick a trail based on distance, terrain, and weather.
    </Step>
    <Step title="Pack essentials">
      Bring water, sun protection, and a basic first-aid kit.
    </Step>
    <Step title="Start early">
      Begin in the morning to avoid peak heat.
    </Step>
  </Steps>
  ```
</ComponentPreview>

### Numbering is automatic

Step numbers are generated from the order of your `Step` blocks.
Reorder steps in MDX, and the displayed numbers update automatically.

<Callout type="tip" title="Write action-first titles">
Start each step title with a verb, such as `Prepare ingredients` or `Turn off
the valve`.
</Callout>

## Rich step content

Each step can include paragraphs, lists, code blocks, and other components.

<ComponentPreview showAllCode>
  ````mdx
  <Steps>
    <Step title="Prep the workspace">
      Clear the table and gather your tools.

      <Callout type="info" title="Before you begin">
        Read all steps once from start to finish.
      </Callout>
    </Step>
    <Step title="Run the command">
      Use this command:

      ```bash
      echo "Ready to start"
      ```
    </Step>
  </Steps>
  ````
</ComponentPreview>

## Props

### `Step` props

| Prop | Description | Type | Default |
| --- | --- | --- | ---: |
| `title` | Title shown for the step heading. | `string` |  |

### `Steps` props

`Steps` is a layout container and currently does not accept props.