steps.mdx

title	description
Steps	Learn how to style numbered lists of tasks to create step-by-step guides in Starlight.

import { Tabs, TabItem, Steps } from '@astrojs/starlight/components';

To style a numbered list of tasks to create step-by-step guides, use the <Steps> component.

import Preview from '~/components/component-preview.astro';

1. Create a new Starlight project:

   npm create astro@latest -- --template starlight

   pnpm create astro --template starlight

   yarn create astro --template starlight

2. Write your first documentation page.

Import

import { Steps } from '@astrojs/starlight/components';

Usage

Use the <Steps> component to style numbered lists of tasks. This is useful for more complex step-by-step guides where each step needs to be clearly highlighted.

Wrap <Steps> around a standard Markdown ordered list. All the usual Markdown syntax is applicable inside <Steps>.

import { Steps } from '@astrojs/starlight/components';

<Steps>

1. Import the component into your MDX file:

   ```js
   import { Steps } from '@astrojs/starlight/components';
   ```

2. Wrap `<Steps>` around your ordered list items.

</Steps>

{% steps %}

1. Import the component into your MDX file:

   ```js
   import { Steps } from '@astrojs/starlight/components';
   ```

2. Wrap `<Steps>` around your ordered list items.

{% /steps %}

1. Import the component into your MDX file:

   import { Steps } from '@astrojs/starlight/components';

2. Wrap <Steps> around your ordered list items.

<Steps> Props

Implementation: Steps.astro

The <Steps> component does not accept any props.