---
title: Steps
description: Numbered step-by-step guides for setup and tutorial content.
url: https://docs.thally.io/components/steps
---

# Steps

Numbered step-by-step guides for setup and tutorial content.

Use `<Steps>` and `<Step>` to structure sequential instructions. Each step renders as a numbered item with a connector line between steps.

## Example

#### Install the package

    ```bash
    npm install @company/sdk
    ```

#### Add your API key

    Create a `.env` file at the root of your project:

    ```bash
    API_KEY=sk-your-key-here
    ```

#### Make your first request

    ```typescript
    import { ApiClient } from '@company/sdk'

    const client = new ApiClient({ apiKey: process.env.API_KEY })
    const result = await client.pets.list()
    console.log(result)
    ```

````mdx
<Steps>
  <Step title="Install the package">
    ```bash
    npm install @company/sdk
    ```
  </Step>
  <Step title="Add your API key">
    Create a `.env` file at the root of your project:

    ```bash
    API_KEY=sk-your-key-here
    ```
  </Step>
  <Step title="Make your first request">
    ```typescript
    import { ApiClient } from '@company/sdk'

    const client = new ApiClient({ apiKey: process.env.API_KEY })
    const result = await client.pets.list()
    console.log(result)
    ```
  </Step>
</Steps>
````

## Props

### `<Step>`

| Prop | Type | Description |
|---|---|---|
| `title` | `string` | Step heading displayed next to the number |