Steps
Displays a sequence of operations in a collapsible layout. Each step can include details and an optional vertical bar. Useful for showing AI steps like reasoning traces, tool calls, or process logs.
Examples
Steps basic
Searching files in repo...
Found 12 files (src, docs)
Parsing markdown and code blocks
Selecting tool: summarize
Running summarize(tool) with top 5 files
Summary generated
Steps with sources
You can use the Source component
to display sources in the Steps block.
Searching across curated sources...
Top matches
Extracting key sections and summarizing…
Steps with custom icons swap and bar
Initializing build context
Scanning 25 markdown files
Generating embeddings (chunk size: 1,024)
Index created
Steps with Text Shimmer Loader
You can use the Loader component
to display a text shimmer loader in the Steps block.
Planning next actions…
Searching repository files…
Parsing and extracting key sections…
Ready to respond
Installation
Copy and paste the following code into your project.
Component API
Steps
| Prop | Type | Default | Description |
|---|---|---|---|
defaultOpen | boolean | true | Whether the Steps starts expanded |
className | string | - | Additional CSS classes |
children | Snippet | - | Child components to render |
StepsTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | - | Trigger content (label) |
leftIcon | Snippet | - | Optional left icon area; keeps width to avoid layout jump |
swapIconOnHover | boolean | true | Swap leftIcon with chevron on hover |
className | string | - | Additional CSS classes |
StepsContent
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes |
bar | Snippet | - | Optional bar element rendered at the left |
children | Snippet | - | Content to display in the steps |
StepsBar
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | bg-muted h-full w-[2px] | Classes for positioning and style |
StepsItem
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | - | Row item content |
className | string | - | Additional CSS classes |