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.
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
Installation
Copy the Source Code
Copy and paste the following code into your project:
Examples
Demo
Searching across curated sources...
Top matches
Extracting key sections and summarizing...
Props
Steps
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | - | Nested steps content rendered inside the collapsible wrapper. |
class | string | - | Additional CSS classes for the wrapper. |
defaultOpen | boolean | true | Initial open state when the component is uncontrolled. |
open | boolean | - | Controlled open state for the collapsible steps list. |
StepsBar
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | - | Additional CSS classes for the vertical bar. |
StepsContent
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | - | Expanded step details rendered beside the bar. |
bar | Snippet | - | Custom bar content rendered instead of the default `StepsBar`. |
class | string | - | Additional CSS classes for the collapsible content. |
StepsItem
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | - | Step item content. |
class | string | - | Additional CSS classes for the step item. |
StepsTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | - | Trigger label content. |
leftIcon | Snippet | - | Optional icon rendered before the label. |
swapIconOnHover | boolean | true | Swaps the left icon for the chevron on hover. |
class | string | - | Additional CSS classes for the trigger. |