Chain of Thought
Display step-by-step reasoning and collapsible thought processes in AI interfaces
Examples
Basic chain of thought
Advanced reasoning steps
Installation
npx shadcn add "https://prompt-kit.com/c/chain-of-thought.json"Component API
ChainOfThought
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | ChainOfThoughtStep components | |
| className | string | Additional CSS classes |
ChainOfThoughtStep
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | ChainOfThoughtTrigger and ChainOfThoughtContent | |
| className | string | Additional CSS classes | |
| isLast | boolean | false | Whether this is the last step in the chain |
| ...props | React.ComponentProps<typeof Collapsible> | Additional collapsible props |
ChainOfThoughtTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Trigger content | |
| leftIcon | React.ReactNode | Icon displayed before the trigger text | |
| swapIconOnHover | boolean | true | Whether to swap icon on hover |
| className | string | Additional CSS classes | |
| ...props | React.ComponentProps<typeof CollapsibleTrigger> | Additional collapsible trigger props |
ChainOfThoughtContent
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Content displayed when expanded | |
| className | string | Additional CSS classes | |
| ...props | React.ComponentProps<typeof CollapsibleContent> | Additional collapsible content props |
ChainOfThoughtItem
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Item content | |
| className | string | Additional CSS classes | |
| ...props | React.ComponentProps<"div"> | Additional div props |