The Steps component renders a numbered list with bold step titles and rich content per step. It's the right choice for any procedure where order matters.
Example#
Install the SDK
npm install @example/sdkInitialize the client
import { Client } from "@example/sdk";
const client = new Client({ apiKey: process.env.API_KEY });Make your first call
const result = await client.users.list();
console.log(result);Insert#
Use the slash menu: /steps. The block inserts with a couple of placeholder steps. Hit Enter inside a step to break to a new paragraph; press Enter on an empty step (or use the + between steps) to add another step.
Settings#
Each Step has one setting:
| Setting | Description |
|---|---|
| Title | Bold title shown next to the step number |
The body of a step can hold anything — code, callouts, images, sub-lists.
When to use Steps vs an ordered list#
| Situation | Use |
|---|---|
| Each step has a single short sentence | Ordered list (1. Do X) |
| Each step has its own paragraph(s), code, or sub-content | Steps |
| Steps are independent options | Cards, not Steps |
If you find yourself with a Steps block where every step is one sentence, switch to a plain ordered list — Steps is overkill for that.
Nesting other components#
Steps work well with code blocks, callouts, and images:
Set up your environment
Add the API key to your .env file:
EXAMPLE_API_KEY=sk_live_...Don't commit this
Add .env to your .gitignore.
Restart your dev server
Environment variables only load on startup.
Long step titles#
Keep titles short — under 60 characters. The number-and-title row is meant to be scannable. Put the detail in the body.
Bad title: "Configure the OAuth callback URL in your app's settings page so that Example can redirect users back to your app after they authenticate"
Better: "Configure the OAuth callback URL" (with the rest in the body).