Steps

Steps work best when order matters and each item includes more than a one-line instruction.

Use in MDX

Use Steps as the wrapper and Step for each item:

<Steps>
  <Step number={1} title="Install dependencies">
    Run `npm install`.
  </Step>
  <Step number={2} title="Start the dev server">
    Run `npm run dev`.
  </Step>
</Steps>

Implementation notes

The wrapper and item components live in src/components/docs/Steps.astro and src/components/docs/Step.astro. The visual styling is controlled by the .docs-step* rules in src/index.css.

Preview

1. 1
   First Step

   These are instructions or content that only pertain to the first step.

   
2. 2
   Second Step

   These are instructions or content that only pertain to the second step.

3. 3
   Third Step

   These are instructions or content that only pertain to the third step.