# Steps

Structure procedural content with numbered markers and a vertical guide.

import { Steps } from '@prosefly/astro-components';

Use `Steps` for installation flows, migration guides, and setup tasks where each
instruction should be easy to scan as part of a sequence.

## Import

```mdx
import { Steps } from '@prosefly/astro-components';
```

## Basic Usage

`Steps` uses the same syntax as Starlight: wrap a single ordered Markdown list
inside the component.

<Steps>

1. **Install the package.**

   Add Lotus and the shared MDX components to your Astro project.

2. **Configure the integration.**

   Register the Lotus integration in `astro.config.mjs` and point it at your
   docs content.

3. **Start writing docs.**

   Create MDX pages, add frontmatter, and organize them with `sidebars`.

</Steps>

```mdx
<Steps>

1. **Install the package.**

   Add Lotus and the shared MDX components to your Astro project.

2. **Configure the integration.**

   Register the Lotus integration in `astro.config.mjs` and point it at your
   docs content.

3. **Start writing docs.**

   Create MDX pages, add frontmatter, and organize them with `sidebars`.

</Steps>
```

## Rich Content

Each list item can contain paragraphs, nested lists, inline code, and fenced
code blocks.

<Steps>

1. **Create a docs page.**

   Add an MDX file under your docs collection.

   ```mdx
   ---
   title: Overview
   description: Introduce the documentation site.
   ---

   Welcome to the docs.
   ```

2. **Add sidebar metadata.**

   Use frontmatter when the page needs local ordering.

   - `sidebar.order` controls position inside generated sidebar groups.
   - `sidebar.label` can override the navigation label.

3. **Verify the page.**

   Run `pnpm check` to catch invalid MDX, missing imports, and type errors.

</Steps>

## Continue Numbering

Use the standard ordered-list start value when a procedure continues from an
earlier sequence.

<Steps>

4. **Review the generated route.**

   Open the page in your browser and confirm the content, sidebar, and table of
   contents all match the expected location.

5. **Publish the docs.**

   Build the site and deploy the generated Astro output.

</Steps>

```mdx
<Steps>

4. **Review the generated route.**
5. **Publish the docs.**

</Steps>
```

## Syntax Rules

- The direct content of `Steps` must be exactly one ordered Markdown list.
- Keep a blank line after `<Steps>` and before `</Steps>` so MDX parses the list
  as Markdown.
- Do not place headings, paragraphs, or multiple lists next to the root list
  inside `Steps`.
- Nested content belongs inside a list item, indented under that item.

## Props

`Steps` does not accept component props. Numbering, spacing, marker colors, and
the guide line are handled by the component CSS and Lotus design tokens.