Steps

Steps provide a numbered sequence for tutorials and guides.

Basic Steps

npm install @jamdesk/cli

jamdesk init

jamdesk dev

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

Rich Content in Steps

Each step can contain any content:

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

const response = await client.getData();
console.log(response);

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>

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>

Properties

Steps

Step