> ## Documentation Index
> Fetch the complete documentation index at: https://docs.blode.md/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Steps

Display numbered step-by-step instructions.

Use the `Steps` and `Step` components to present sequential instructions. Each step is automatically numbered.

## Basic usage

```text
<Steps>
  <Step title="Install the CLI">
    Run the install command for your package manager:

    &#96;&#96;&#96;bash
    npm i -g blodemd
    &#96;&#96;&#96;

  </Step>
  <Step title="Create your project">
    Create a new docs project in the current directory:

    &#96;&#96;&#96;bash
    blodemd new
    &#96;&#96;&#96;

  </Step>
  <Step title="Start the dev server">
    Preview your documentation locally:

    &#96;&#96;&#96;bash
    blodemd dev
    &#96;&#96;&#96;

  </Step>
</Steps>
```

  1. **Install the CLI**

Run the install command for your package manager:

    ```bash
    npm i -g blodemd
    ```
  1. **Create your project**

Create a new docs project in the current directory:

    ```bash
    blodemd new
    ```
  1. **Start the dev server**

Preview your documentation locally:

    ```bash
    blodemd dev
    ```

## Title sizing

Control the heading level of step titles with `titleSize`, either on individual steps or on the parent `Steps` component:

```mdx
<Steps titleSize="h3">
  <Step title="Configure your project">
    Edit `docs.json` to set your project name and navigation.
  </Step>
  <Step title="Write your content">
    Create MDX files in the `docs/` directory.
  </Step>
</Steps>
```

  1. **Configure your project**

Edit `docs.json` to set your project name and navigation.
  1. **Write your content**

Create MDX files in the `docs/` directory.

## Props

### Steps

- `titleSize` (type: "p" | "h2" | "h3" | "h4", required: false, default: "p"): Default heading level for all child steps.
- `children` (type: ReactNode, required: true): One or more Step components.

### Step

- `title` (type: string, required: true): The step heading text.
- `icon` (type: ReactNode, required: false): Custom icon to replace the step number.
- `stepNumber` (type: number, required: false): Override the automatic step number.
- `titleSize` (type: "p" | "h2" | "h3" | "h4", required: false, default: "p"): Heading level for this step. Overrides the parent value.
- `children` (type: ReactNode, required: false): Content displayed below the step title.