Steps

Steps create interactive, collapsible sections that are perfect for tutorials, guides, and step-by-step instructions. They can be used individually or grouped together in a steps container. Each step can be interactive (collapsible) or static, and includes a visual marker with an optional title.

PropertiesCopied!

idCopied!

string required

A unique identifier for the step. This is used internally for step management and accessibility.

titleCopied!

string optional

The title displayed in the step header. This appears next to the step marker and provides a brief description of the step.

interactivityCopied!

string optional

Controls whether the step is interactive (collapsible) or static:

"none": Makes the step static (non-collapsible)
Any other value or omitted: Makes the step interactive (collapsible)

iconCopied!

string optional

A custom icon to display in the step marker. Uses Scalar icon format. If not provided, the component will use the default step marker icon.

childIndexCopied!

number optional

The position of this step within a steps container. Used internally for step ordering and navigation.

ExamplesCopied!

Basic StepCopied!

Install Dependencies

First, install the required dependencies by running:

npm install @scalar/guide-elements

<scalar-step
  id="step-1"
  title="Install Dependencies">
  First, install the required dependencies by running: ```bash npm install
  @scalar/guide-elements</scalar-step
>

```

Static Step (Non-collapsible)Copied!

Configuration

This step cannot be collapsed and is always visible.

const config = {
  theme: 'dark',
  interactive: false,
}

<scalar-step
  id="step-2"
  title="Configuration"
  interactivity="none">
  This step cannot be collapsed and is always visible. ```javascript const
  config = { theme: 'dark', interactive: false };</scalar-step
>

```

Step with Custom IconCopied!

Deploy Application

Deploy your application to production:

npm run deploy

<scalar-step
  id="step-3"
  title="Deploy Application"
  icon="solid/interface-rocket">
  Deploy your application to production: ```bash npm run deploy</scalar-step
>

```

Steps ContainerCopied!

Setup Project

Initialize a new project: ```bash mkdir my-project cd my-project npm init -y ```

Install Dependencies

Install the required packages: ```bash npm install react react-dom ```

Start Development

Begin development: ```bash npm start ```

<scalar-steps>
  <scalar-step
    id="step-1"
    title="Setup Project">
    Initialize a new project: ```bash mkdir my-project cd my-project npm init -y
    ```
  </scalar-step>

  <scalar-step
    id="step-2"
    title="Install Dependencies">
    Install the required packages: ```bash npm install react react-dom ```
  </scalar-step>

  <scalar-step
    id="step-3"
    title="Start Development">
    Begin development: ```bash npm start ```
  </scalar-step>
</scalar-steps>