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);Source#
<Steps>
<Step title="Install the SDK">
```bash
npm install @example/sdk
```
</Step>
<Step title="Initialize the client">
...
</Step>
</Steps>Props#
<Steps>#
No props. Just wraps the steps.
<Step>#
| Prop | Type | Description |
|---|---|---|
title | string | Bold title shown next to the step number |
children | content | Anything — code, callouts, images, nested components |
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).