Steps

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

Import

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

Basic Usage

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

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>

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.

1. Create a docs page.

   Add an MDX file under your docs collection.

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

Continue Numbering

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

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>

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.