Steps Component

The <Steps> component allows you to guide users through a series of sequential steps, providing instructions and content for each step along the way.

Each step can have arbitrary Markdown or other components.

Step 1

Explanation of step 1

Step 2

Explanation of step 2

Step 3

Explanation of step 3

Step component structure

<Steps>
  <Step title="...">
    ...
  </Step>
  <Step title="...">
    ...
  </Step>
</Steps>

Structure

The <Steps> (plural) component expects as children a sequence of <Step> (singular) components.

Step component structure

<Steps>
  <Step title="...">
    ...
  </Step>
  <Step title="...">
    ...
  </Step>
</Steps>

Passing anything other than a <Step> components as a child to the <Steps> component will result in an error.

Attributes

The <Steps> and <Step> components can be customized using the following attributes.

Step title

Each <Step> (singular) component must have a title attribute, which specifies the title of the step.

First step

Procure volcanic island lair

Second step

???

Third step

Profit!

Step component structure

<Steps>
  <Step title="...">
    ...
  </Step>
  <Step title="...">
    ...
  </Step>
</Steps>