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
npx shadcn add "https://prompt-kit.com/c/steps.json"Component API
Steps
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultOpen | boolean | true | Whether the Steps starts expanded |
| className | string | Additional CSS classes | |
| ...props | React.ComponentProps<Collapsible> | Root collapsible component props |
StepsTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Trigger content (label) | |
| leftIcon | React.ReactNode | Optional left icon area; keeps width to avoid layout jump | |
| swapIconOnHover | boolean | true | Swap leftIcon with chevron on hover |
| className | string | Additional CSS classes | |
| ...props | React.ComponentProps<CollapsibleTrigger> | Trigger props forwarded to CollapsibleTrigger |
StepsContent
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | Additional CSS classes | |
| bar | React.ReactNode | <StepsBar /> | Optional bar element rendered at the left |
| ...props | React.ComponentProps<CollapsibleContent> | Collapsible content props |
StepsBar
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | bg-muted h-full w-[2px] | Classes for positioning and style |
| ...props | React.HTMLAttributes<HTMLDivElement> | Pass-through div attributes/styles |
StepsItem
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Row item content | |
| className | string | Additional CSS classes | |
| ...props | React.ComponentProps<'div'> | Pass-through div attributes/styles |
StepsRoot
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultOpen | boolean | true | Whether the Steps starts expanded |
| className | string | Additional CSS classes | |
| ...props | React.ComponentProps<Collapsible> | Root collapsible component props |