Collapsible reasoning steps for AI thinking interfaces.
Features
- Collapsible steps for showing an agent's reasoning.
- Connecting line between steps that adapts to the active step.
- Optional left icon per step, with a chevron swap on hover.
- Composable parts: step, trigger, content, and item.
Installation
pnpm dlx shadcn@latest add @syedmoin/chain-of-thought
Usage
import {
ChainOfThought,
ChainOfThoughtContent,
ChainOfThoughtItem,
ChainOfThoughtStep,
ChainOfThoughtTrigger,
} from "@/components/chain-of-thought"<ChainOfThought>
<ChainOfThoughtStep defaultOpen>
<ChainOfThoughtTrigger>Understanding the request</ChainOfThoughtTrigger>
<ChainOfThoughtContent>
<ChainOfThoughtItem>Reasoning goes here.</ChainOfThoughtItem>
</ChainOfThoughtContent>
</ChainOfThoughtStep>
</ChainOfThought>