Chain of Thought

Collapsible reasoning steps with active streaming and complete states.

Analyzing query...

Formulating response...

Installation

npx shadcn add https://ui.adq.ai/api/r/chain-of-thought

Usage

import {
  ChainOfThought,
  ChainOfThoughtHeader,
  ChainOfThoughtContent,
  ChainOfThoughtStep,
} from "@/components/ai-elements/chain-of-thought";

function ThinkingBlock() {
  return (
    <ChainOfThought>
      <ChainOfThoughtHeader>Chain of thought</ChainOfThoughtHeader>
      <ChainOfThoughtContent>
        <ChainOfThoughtStep
          label="Analyzing the user query..."
          status="complete"
        />
        <ChainOfThoughtStep
          label="Formulating response..."
          status="active"
        />
      </ChainOfThoughtContent>
    </ChainOfThought>
  );
}

Props

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state of the collapsible.
`defaultOpen`	`boolean`	false	Default open state (uncontrolled).
`onOpenChange`	`(open: boolean) => void`	—	Callback when open state changes.