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.

1. Step 1

   Explanation of step 1

2. Step 2

   Explanation of step 2

3. Step 3

   Explanation of step 3

Usage

A <Steps> component expects as children a sequence of <Step> (singular) components:

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

Example

Here is a full example of the <Step> component.

<Steps>
  <Step title="Let's get started creating a code component">
  </Step>
  <Step title="First, a basic code component">
    ```typescript
    const foo: string = "bar";
    ```
  </Step>
  <Step title="Next, let's add a title">
    ```typescript title="This is a typescript example"
    const foo: string = "bar";
    ```
  </Step>
  <Step title="Add tabs">
    <CodeSelect title="Multi-language code box">
    ```typescript
    const foo: string = "bar";
    ```
    ```rust
    let foo: String = "bar";
    ```
    </CodeSelect>
  </Step>
</Steps>

1. Let's get started creating a code component
2. First, a basic code component

   const foo: string = "bar";

3. Next, let's add a title
   This is a typescript example

   const foo: string = "bar";

4. Add tabs
   Typescript

   Multi-language code box

   const foo: string = "bar";

<Step> Component

The <Step> (singular) component represents an individual step within the <Steps> (plural) container. It accepts the following props:

• title: Specifies the title of the step, which is displayed as the step label. (required)