Steps

Overview

Steps renders ordered instructions with consistent spacing and automatic numbering. It works well for setup guides and onboarding.

Example

1. 1

   Install Dependencies

Install the project dependencies before starting the app.
2. 2

   Start the Dev Server

Launch the local site and confirm the documentation is loading.
3. 3

   Begin Editing Content

Add or update markdown files inside the content directory.

Markdown Usage

Import the Steps and Step components into the markdown, then pass a title prop and the Step content as children:

import { Steps, Step } from '$ui/steps';
 
<Steps>
	<Step title="Install Dependencies">
		Install the project dependencies before starting the app.
	</Step>
 
	<Step title="Start the Dev Server">
		Launch the local site and confirm the documentation is loading.
	</Step>
 
	<Step title="Begin Editing Content">
		Add or update markdown files inside the content directory.
	</Step>
</Steps>

Starting at a Different Number

Use the start prop to start the first step at a specific number.

import { Steps, Step } from '$ui/steps';
 
<Steps start={4}>
	<Step title="Install Dependencies">
		Install the project dependencies before starting the app.
	</Step>
 
	<Step title="Start the Dev Server">
		Launch the local site and confirm the documentation is loading.
	</Step>
 
	<Step title="Begin Editing Content">
		Add or update markdown files inside the content directory.
	</Step>
</Steps>

1. 4

   Install Dependencies

Install the project dependencies before starting the app.
2. 5

   Start the Dev Server

Launch the local site and confirm the documentation is loading.
3. 6

   Begin Editing Content

Add or update markdown files inside the content directory.

Display in Table Of Contents

You can show each step as a header in the table of contents by adding a unique id to each step. The step titles are h6 heading elements, so they will always have the highest padding in the table of contents.

import { Steps, Step } from '$ui/steps';
 
<Steps>
	<Step id="install-dependencies" title="Install Dependencies">
		Install the project dependencies before starting the app.
	</Step>
 
	<Step id="start-dev-server" title="Start the Dev Server">
		Launch the local site and confirm the documentation is loading.
	</Step>
 
	<Step id="edit-content" title="Begin Editing Content">
		Add or update markdown files inside the content directory.
	</Step>
</Steps>

1. 1

   Install Dependencies

Install the project dependencies before starting the app.
2. 2

   Start the Dev Server

Launch the local site and confirm the documentation is loading.
3. 3

   Begin Editing Content

Add or update markdown files inside the content directory.

Editing the Component

Steps lives in src/lib/components/ui/steps.