---
title: Steps
description: Numbered step-by-step guides for setup flows, tutorials, and troubleshooting. Supports icons, code blocks, and nested content.
---

> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.

Use Steps for clear, numbered walkthroughs such as setup and troubleshooting flows.

## Usage

```mdx
<Steps>
  <Step title="Install">Add the package.</Step>
  <Step title="Configure">Set your options.</Step>
  <Step title="Run">Start the build.</Step>
</Steps>
```

## Basic Steps

<Steps>
  <Step title="Install the package">
    ```bash
    npm install @jamdesk/cli
    ```
  </Step>
  <Step title="Initialize your project">
    ```bash
    jamdesk init
    ```
  </Step>
  <Step title="Start the dev server">
    ```bash
    jamdesk dev
    ```
  </Step>
</Steps>

````mdx
<Steps>
  <Step title="Install the package">
    ```bash
    npm install @jamdesk/cli
    ```
  </Step>
  <Step title="Initialize your project">
    ```bash
    jamdesk init
    ```
  </Step>
  <Step title="Start the dev server">
    ```bash
    jamdesk dev
    ```
  </Step>
</Steps>
````

## Steps Without Titles

Steps work without titles too:

<Steps>
  <Step>
    Clone the repository from GitHub.
  </Step>
  <Step>
    Install dependencies with `npm install`.
  </Step>
  <Step>
    Run the development server.
  </Step>
</Steps>

```mdx
<Steps>
  <Step>
    Clone the repository from GitHub.
  </Step>
  <Step>
    Install dependencies with `npm install`.
  </Step>
  <Step>
    Run the development server.
  </Step>
</Steps>
```

## Rich Content in Steps

Each step can contain any content:

<Steps>
  <Step title="Configure your API">
    Create a configuration file:

    ```json config.json
    {
      "apiKey": "your-api-key",
      "endpoint": "https://api.example.com"
    }
    ```

    <Note>
    Keep your API key secret! Never commit it to version control.
    </Note>
  </Step>
  <Step title="Make your first request">
    Use the SDK to make a request:

    ```javascript
    const response = await client.getData();
    console.log(response);
    ```
  </Step>
</Steps>

## Steps with Icons

Use icons instead of numbers for visual variety:

<Steps>
  <Step title="Clone the repository" icon="code-branch">
    Clone from GitHub to your local machine.
  </Step>
  <Step title="Install dependencies" icon="download">
    Run the package manager install command.
  </Step>
  <Step title="Start developing" icon="rocket">
    Launch the development server.
  </Step>
</Steps>

```mdx
<Steps>
  <Step title="Clone the repository" icon="code-branch">
    Clone from GitHub to your local machine.
  </Step>
  <Step title="Install dependencies" icon="download">
    Run the package manager install command.
  </Step>
  <Step title="Start developing" icon="rocket">
    Launch the development server.
  </Step>
</Steps>
```

## Title Size

Control the heading hierarchy with `titleSize` on the Steps container:

<Steps titleSize="h3">
  <Step title="First Step">
    This title renders as an h3 element.
  </Step>
  <Step title="Second Step">
    Useful for SEO and document structure.
  </Step>
</Steps>

```mdx
<Steps titleSize="h3">
  <Step title="First Step">
    This title renders as an h3 element.
  </Step>
  <Step title="Second Step">
    Useful for SEO and document structure.
  </Step>
</Steps>
```

## Props

### Steps

<ParamField name="titleSize" type="p | h2 | h3" default="p">
  Heading element for step titles.
</ParamField>

### Step

<ParamField name="title" type="string">
  Optional step title.
</ParamField>

<ParamField name="icon" type="string">
  Icon name, URL, or path (replaces step number).
</ParamField>

<ParamField name="iconType" type="solid | regular | light | thin | sharp-solid | duotone | brands" default="solid">
  Font Awesome icon style.
</ParamField>

<ParamField name="titleSize" type="p | h2 | h3">
  Override the parent Steps titleSize. Inherits from parent if not set.
</ParamField>

<ParamField name="stepNumber" type="number">
  Manually set step number (auto-assigned if omitted).
</ParamField>

## What's Next?

<Columns cols={2}>
  <Card title="Components Overview" icon="puzzle-piece" href="/components/overview">
    Browse all available components
  </Card>
  <Card title="MDX Basics" icon="file-code" href="/content/mdx-basics">
    Learn how to use components in MDX
  </Card>
</Columns>