║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

import ComponentCodePreview from "@/components/app/component-code-preview" import { generateMetadata } from "../utils/metadata" import { StepsBasic } from "./steps-basic" import { StepsIconSwap } from "./steps-icon-swap" import { StepsWithLoader } from "./steps-with-loader" import { StepsWithSource } from "./steps-with-source"

export const metadata = generateMetadata( "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." )

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

<ComponentCodePreview component={<StepsBasic />} filePath="app/docs/steps/steps-basic.tsx" classNameComponentContainer="p-8 justify-start items-start min-h-[300px]" />

Steps with sources

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

<ComponentCodePreview component={<StepsWithSource />} filePath="app/docs/steps/steps-with-source.tsx" classNameComponentContainer="p-8 justify-start items-start min-h-[300px]" />

Steps with custom icons swap and bar

<ComponentCodePreview component={<StepsIconSwap />} filePath="app/docs/steps/steps-icon-swap.tsx" classNameComponentContainer="p-8 justify-start items-start min-h-[300px]" />

Steps with Text Shimmer Loader

You can use the Loader component to display a text shimmer loader in the Steps block.

<ComponentCodePreview component={<StepsWithLoader />} filePath="app/docs/steps/steps-with-loader.tsx" classNameComponentContainer="p-8 justify-start items-start min-h-[300px]" />

Installation

<Tabs defaultValue="cli"> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli">

<CodeBlock code={npx shadcn add "https://prompt-kit.com/c/steps.json"} language="bash" />

</TabsContent> <TabsContent value="manual"> <Steps>

<Step>Copy and paste the following code into your project.</Step>

<CodeBlock filePath="components/prompt-kit/steps.tsx" language="tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps> </TabsContent> </Tabs>

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 |

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║