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> 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 ``` ::: Static Step (Non-collapsible)
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> 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, } ``` ::: Steps Container
Setup Project
Initialize a new project:
mkdir my-project cd my-project npm init -y Install Dependencies
Install the required packages:
npm install react react-dom Start Development
Begin development:
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> Setup Project
Initialize a new project:
mkdir my-project cd my-project npm init -y Install Dependencies
Install the required packages:
npm install react react-dom Start Development
Begin development:
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{ id="step-2" title="Install Dependencies" } Install the required packages: ```bash npm install react react-dom ``` ::: :::scalar-step{ id="step-3" title="Start Development" } Begin development: ```bash npm start ``` ::: ::::