Steps

Use Steps when readers should follow a sequence in order.

Boil water

Fill a pot with water and bring it to a boil.

Add pasta

Add the pasta and stir for the first 30 seconds.

Drain and serve

Drain when al dente, then add sauce and serve.

<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>

Structure

Use `Steps` and `Step` together

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

Choose a route

Pick a trail based on distance, terrain, and weather.

Pack essentials

Bring water, sun protection, and a basic first-aid kit.

Start early

Begin in the morning to avoid peak heat.

<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>

Numbering is automatic

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

Rich step content

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

Prep the workspace

Clear the table and gather your tools.

Run the command

Use this command:

echo "Ready to start"

<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>

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.