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 npx docslit init my-docs \``` </wc-step> <wc-step title="Start the server"> Launch the development server. \```bash npx 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.

npx docslit init my-docs

Launch the development server.

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

Familiar names

These Mintlify-style tag names work directly:

MDX-style Resolves to Notes
<Steps> <wc-steps>
<Step> <wc-step> n is auto-numbered based on position inside <Steps>.