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.

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

pnpm dlx shadcn-svelte@latest add https://svelte-ai-elements.vercel.app/p/steps.json

Examples

With Sources

You can use the "Source" component to display sources in the Steps block.

Searching across curated sources...

Top matches

prompt-kit.com/docs

github.com/ibelick/prompt-kit

Extracting key sections and summarizing...

Custom Icons Swap and Bar

Initializing build context

Scanning 25 markdown files

Generating embeddings (chunk size: 1,024)

Index created

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

Props

Steps

Name	Type	Default
`defaultOpen`	`boolean`	`true`
`className`	`string`
`children`	`Snippet`

StepsTrigger

Name	Type	Default
`children`	`Snippet`
`leftIcon`	`Snippet`
`swapIconOnHover`	`boolean`	`true`
`className`	`string`

StepsContent

Name	Type	Default
`className`	`string`
`bar`	`Snippet`
`children`	`Snippet`

StepsBar

Name	Type	Default
`className`	`string`	`"bg-muted h-full w-[2px]"`

StepsItem

Name	Type	Default
`children`	`Snippet`
`className`	`string`