Skip to content

Steps

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

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

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

Implementation: Steps.astro

The <Steps> component does not accept any props.