# Steps

Use `Steps` for ordered setup and installation flows. It renders a numbered rail, with each step title and body aligned like common install guides.

## Usage

```mdx
<Steps>
  <Step title="Install packages">
    Add ReallySimpleDocs, Basecoat, and Tailwind CSS.
  </Step>
  <Step title="Configure Astro">
    Add the ReallySimpleDocs integration to astro.config.mjs.
  </Step>
</Steps>
```

## Options

### Steps

| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `class` | `string` | `""` | Extra classes applied to the ordered list. |

### Step

| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `title` | `string` | `undefined` | Optional heading. |
| `class` | `string` | `""` | Extra classes applied to the list item. |

## Examples

### Installation flow

<Preview class="w-full">
<Steps>
  <Step title="Install packages">
    Add ReallySimpleDocs, Basecoat, and Tailwind CSS to your Astro app.

    <CodeGroup>
      ```bash title="npm"
      npm install reallysimpledocs basecoat-css@beta tailwindcss
      ```

      ```bash title="pnpm"
      pnpm add reallysimpledocs basecoat-css@beta tailwindcss
      ```

      ```bash title="yarn"
      yarn add reallysimpledocs basecoat-css@beta tailwindcss
      ```

      ```bash title="bun"
      bun add reallysimpledocs basecoat-css@beta tailwindcss
      ```
    </CodeGroup>
  </Step>

  <Step title="Create docs">
    Add `docs/docs.json` and one or more Markdown or MDX pages.
  </Step>

  <Step title="Run Astro">
    Start the dev server and open the URL printed by Astro.

    <div>
      <a href="/quickstart/" class="btn" data-variant="secondary">
        Read Quickstart
      </a>
    </div>
  </Step>
</Steps>
</Preview>