ScalarScalar API

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.

Properties

id

string required

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

title

string optional

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

interactivity

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)

icon

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.

childIndex

number optional

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

Examples

Basic Step

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)

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 Icon

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 Container

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>