Steps

The Steps component creates numbered step-by-step instructions, perfect for tutorials and guides.

Usage

Code

mdx

1<Steps>
2  <Step title="First Step">
3    Description of the first step.
4  </Step>
5  
6  <Step title="Second Step">
7    Description of the second step.
8  </Step>
9</Steps>

Live Example

Install Dependencies

First, install the required npm packages:

Code

bash

1npm install svelte @sveltejs/kit

Create Configuration

Create a configuration file in your project root:

Code

javascript

1// svelte.config.js
2module.exports = {
3  reactStrictMode: true,
4}

Start Development Server

Run the development server:

Code

bash

1npm run dev

Your site is now running at http://localhost:3000!

Deploy to Production

When ready, build and deploy your application:

Code

bash

1npm run build
2npm start

Props

Steps

Prop	Type	Default	Description
`children`	`ReactNode`	required	Step components

Step

Prop	Type	Default	Description
`title`	`string`	required	Step title/heading
`children`	`ReactNode`	required	Step content

Features

Automatic Numbering - Steps are numbered automatically using CSS counters
Visual Timeline - A connecting line shows the progression through steps
Rich Content - Each step supports full MDX content including code blocks

Tip

Steps work great for installation guides, tutorials, and any sequential process that users need to follow.

Documentation

Steps

Usage

Live Example

Install Dependencies

Create Configuration

Start Development Server

Deploy to Production

Props

Steps

Step

Features