Steps

Components•3 min read||

Use steps to guide readers through sequential procedures. Steps auto-number themselves and provide clear visual structure for tutorials and setup guides.

Basic steps

<wc-steps> <wc-step title="Create a project"> Run the init command to scaffold a new project. \```bash docslit init my-docs \``` </wc-step> <wc-step title="Start the server"> Launch the development server. \```bash docslit dev \``` </wc-step> <wc-step title="Open your browser"> Visit `http://localhost:3000` to see your site. </wc-step> </wc-steps>

Run the init command to scaffold a new project.

docslit init my-docs

Launch the development server.

docslit dev

Visit http://localhost:3000 to see your site.

Attributes

The step heading displayed next to the step number.

Override the auto-generated step number. Use this when you need non-sequential numbering.

Rich content in steps

Each step supports full Markdown content — code blocks, callouts, lists, tables, and other components:

Open docslit.json and set your site name:

{
  "name": "My Product Docs"
}

Choose a name that matches your product branding.

Create docs/getting-started.md with the following content:

---
title: Getting started
---

# Getting started

Welcome to the docs!

Check that your new page appears in the sidebar and renders correctly.

When to use steps

Use steps for any sequential procedure where order matters:

Installation and setup guides
Tutorial walkthroughs
Deployment checklists
Migration procedures

For non-sequential content, use accordions or standard headings instead.