---
title: Steps
description: Step-by-step instructions for tutorials and guides.
icon: list-ordered
---

# Steps

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

## Basic Steps

```mdx
<Steps>
  <Step title="Install the CLI">
    Download and install the Syntext CLI:
    ```bash
    curl -fsSL https://get.syntext.dev | sh
    ```
  </Step>
  <Step title="Initialize your project">
    Create a new documentation project:
    ```bash
    stx init --name "My Docs"
    ```
  </Step>
  <Step title="Start the dev server">
    Preview your docs locally:
    ```bash
    stx dev
    ```
  </Step>
</Steps>
```

<Steps>
  <Step title="Install the CLI">
    Download and install the Syntext CLI:
    ```bash
    curl -fsSL https://get.syntext.dev | sh
    ```
  </Step>
  <Step title="Initialize your project">
    Create a new documentation project:
    ```bash
    stx init --name "My Docs"
    ```
  </Step>
  <Step title="Start the dev server">
    Preview your docs locally:
    ```bash
    stx dev
    ```
  </Step>
</Steps>

## With Rich Content

Steps can contain any markdown or components:

```mdx
<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>
```

<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">For REST APIs</Card>
      <Card title="SDK Docs">For libraries</Card>
    </CardGroup>
  </Step>
</Steps>

## With Icons

Add icons to steps:

```mdx
<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>
```

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

## Compact Steps

For simpler instructions:

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

<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

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

- 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