Steps
To style a numbered list of tasks to create step-by-step guides, use the <Steps> component.
Create a new Starlight project:
Shell npm create astro@latest -- --template starlightShell pnpm create astro --template starlightShell yarn create astro --template starlightWrite your first documentation page.
Import
Section titled “Import”import { Steps } from '@astrojs/starlight/components';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 %}Import the component into your MDX file:
JavaScript import { Steps } from '@astrojs/starlight/components';Wrap
<Steps>around your ordered list items.
<Steps> Props
Section titled “<Steps> Props”Implementation: Steps.astro
The <Steps> component does not accept any props.