Steps

The Steps component creates numbered, visually connected step-by-step instructions. Perfect for tutorials, setup guides, and multi-step processes.

Basic Steps

<Steps>
<Step title="Install the CLI">
Download and install the Syntext CLI:
```bash
curl -fsSL https://get.syntext.dev | sh

Create a new documentation project: ```bash stx init --name "My Docs" ``` Preview your docs locally: ```bash stx dev ``` ```

Download and install the Syntext CLI:

curl -fsSL https://get.syntext.dev | sh

Create a new documentation project:

stx init --name "My Docs"

Preview your docs locally:

stx dev

With Rich Content

Steps can contain any markdown or components:

<Steps>
<Step title="Create an account">
Visit [syntext.dev/signup](https://syntext.dev/signup) and create your account.

<Note>
Use your company email for team features.
</Note>
</Step>
<Step title="Choose a template">
Select from available templates:

<CardGroup cols={2}>
<Card title="API Docs" href="/templates/api">For REST APIs</Card>
<Card title="SDK Docs" href="/templates/sdk">For libraries</Card>
</CardGroup>
</Step>
</Steps>

Visit syntext.dev/signup and create your account.

Use your company email for team features.

Select from available templates:

For REST APIs For libraries

With Icons

Add icons to steps:

<Steps>
<Step title="Download" icon="download">
Download the installer for your platform.
</Step>
<Step title="Configure" icon="settings">
Set up your configuration file.
</Step>
<Step title="Deploy" icon="rocket">
Push to production.
</Step>
</Steps>

Download the installer for your platform.

Set up your configuration file.

Push to production.

Compact Steps

For simpler instructions:

<Steps>
<Step title="Clone the repository" />
<Step title="Install dependencies with `npm install`" />
<Step title="Run `npm start` to launch" />
</Steps>

Step Props

Prop	Type	Description
`title`	string	Step heading (required)
`icon`	string	Optional icon
`children`	ReactNode	Step content

Steps Props

Prop	Type	Default	Description
`titleSize`	string	`"md"`	Title size: `"sm"`, `"md"`, `"lg"`
`children`	Step[]	—	Step components

Best Practices

Keep steps focused on a single action. If a step requires many sub-actions, consider breaking it into multiple steps.

Use clear, action-oriented titles
Include code examples where relevant
Keep content within each step concise
Number steps automatically — don't add manual numbers
Test that the steps actually work in order