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

<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

Install packages

Add ReallySimpleDocs, Basecoat, and Tailwind CSS to your Astro app.

npm install reallysimpledocs basecoat-css@beta tailwindcss

pnpm add reallysimpledocs basecoat-css@beta tailwindcss

yarn add reallysimpledocs basecoat-css@beta tailwindcss

bun add reallysimpledocs basecoat-css@beta tailwindcss

Create docs

Add docs/docs.json and one or more Markdown or MDX pages.

Run Astro

Start the dev server and open the URL printed by Astro.

Read Quickstart

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