Steps

Properties#

Step#

Prop	Type	Default	Description
`title`	`string`	—	Label shown next to the step marker.
`id`	`string`	—	Optional unique identifier for the step. Used for deep links and accessibility.
`icon`	`string`	—	Custom icon for the step marker. Accepts a built-in icon key (Phosphor or Simple Icons) or a custom URL.
`interactivity`	`'none'`	—	Set to `"none"` to render a static, non-collapsible step.

Steps#

<Steps> is a container with no props of its own — it groups its <Step> children.

Examples#

A Single Step#

Install Dependencies

First, install the required dependencies:

pnpm add @scalar/guide-elements

<scalar-step title="Install Dependencies">
First, install the required dependencies:
 
```bash
pnpm add @scalar/guide-elements
```
</scalar-step>

<Step title="Install Dependencies">
  First, install the required dependencies:
 
  ```bash
  pnpm add @scalar/guide-elements
  ```
</Step>

Steps Container#

1. Set up the project

Initialize a new project:

mkdir my-project
cd my-project
pnpm init

2. Install dependencies

pnpm add react react-dom

3. Start development

pnpm dev

<scalar-steps>
  <scalar-step title="Set up the project">
Initialize a new project:
 
```bash
mkdir my-project
cd my-project
pnpm init
```
  </scalar-step>
  <scalar-step title="Install dependencies">
```bash
pnpm add react react-dom
```
  </scalar-step>
  <scalar-step title="Start development">
```bash
pnpm dev
```
  </scalar-step>
</scalar-steps>

<Steps>
  <Step title="Set up the project">
    Initialize a new project:
 
    ```bash
    mkdir my-project
    cd my-project
    pnpm init
    ```
  </Step>
  <Step title="Install dependencies">
    ```bash
    pnpm add react react-dom
    ```
  </Step>
  <Step title="Start development">
    ```bash
    pnpm dev
    ```
  </Step>
</Steps>

Static Step#

Heads up

This step cannot be collapsed and is always visible.

<scalar-step title="Heads up" interactivity="none">
  This step cannot be collapsed and is always visible.
</scalar-step>

<Step title="Heads up" interactivity="none">
  This step cannot be collapsed and is always visible.
</Step>

Updated Sep 24, 2026