Chain of Thought
The steps an agent took, on a rail with live status.
Chain of Thought lists an agent's steps on a vertical rail: completed steps tick, the active step shimmers, upcoming steps wait in dashes. Steps can carry detail such as search results or files touched.
Preview
- Read the failing test output (in progress)
- Searched the codebase for “prorate” (pending)
- Writing the fix in billing/prorate.ts (pending)
- Run the test suite (pending)
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/chain-of-thought.jsonThe CLI also installs the Cuelark theme tokens, the GSAP motion layer and the components it builds on. With the @cuelark namespace configured, use @cuelark/chain-of-thought.
Builds on: collapsible, motion, text-shimmer
Usage
import { ChainOfThought, ChainOfThoughtStep } from "@/components/ui/chain-of-thought";
<ChainOfThought>
<ChainOfThoughtStep label="Searched docs" />
<ChainOfThoughtStep status="active" label="Writing fix" />
</ChainOfThought>Motion
Steps slide in as they are added; the active label shimmers.
Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.
API reference
ChainOfThought
| Prop | Type | Default | Description |
|---|---|---|---|
| title | ReactNode | "Chain of thought" | Header. |
ChainOfThoughtStep
| Prop | Type | Default | Description |
|---|---|---|---|
| status | "complete" | "active" | "pending" | "complete" | Step state. |
| label | ReactNode | — | Step text. |
Accessibility
- Fully keyboard operable with visible focus.
- Live regions announce streaming updates politely.
FAQ
Also searched as: chain of thought ui · agent steps component · ai progress steps · agent activity timeline · shadcn ai chain of thought