Chain of Thought

Display step-by-step reasoning process with progress indicators.

"use client"

import { ImageIcon, SearchIcon } from "lucide-react"

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

export function ChainOfThoughtDemo() {
  return (
    <div className="w-full">
      <ChainOfThought defaultOpen>
        <ChainOfThoughtHeader />
        <ChainOfThoughtContent>
          <ChainOfThoughtStep
            icon={SearchIcon}
            label="Searching for profiles for Hayden Bleasel"
            status="complete"
          >
            <ChainOfThoughtSearchResults>
              {[
                "https://www.x.com",
                "https://www.instagram.com",
                "https://www.github.com",
              ].map((website) => (
                <ChainOfThoughtSearchResult key={website}>
                  {new URL(website).hostname}
                </ChainOfThoughtSearchResult>
              ))}
            </ChainOfThoughtSearchResults>
          </ChainOfThoughtStep>

          <ChainOfThoughtStep
            icon={ImageIcon}
            label="Found the profile photo for Hayden Bleasel"
            status="complete"
          >
            <ChainOfThoughtImage caption="Hayden Bleasel's profile photo from x.com, showing a Ghibli-style man.">
              <img
                src="https://avatar.vercel.sh/haydenbleasel"
                alt="Example profile"
                className="aspect-square h-[150px] rounded-md border object-cover"
              />
            </ChainOfThoughtImage>
          </ChainOfThoughtStep>

          <ChainOfThoughtStep
            label="Hayden Bleasel is an Australian product designer, software engineer, and founder. He is currently based in the United States working for Vercel, an American cloud application company."
            status="complete"
          />

          <ChainOfThoughtStep
            icon={SearchIcon}
            label="Searching for recent work..."
            status="active"
          >
            <ChainOfThoughtSearchResults>
              {["https://www.github.com", "https://www.dribbble.com"].map(
                (website) => (
                  <ChainOfThoughtSearchResult key={website}>
                    {new URL(website).hostname}
                  </ChainOfThoughtSearchResult>
                )
              )}
            </ChainOfThoughtSearchResults>
          </ChainOfThoughtStep>
        </ChainOfThoughtContent>
      </ChainOfThought>
    </div>
  )
}

Installation

CLI

Manual


pnpm
npm
yarn
bun
pnpm dlx shadcn@latest add chain-of-thought

Usage

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

<ChainOfThought>
  <ChainOfThoughtHeader>Reasoning Process</ChainOfThoughtHeader>
  <ChainOfThoughtContent>
    <ChainOfThoughtStep number={1} title="Step 1" isCompleted>
      Step content...
    </ChainOfThoughtStep>
  </ChainOfThoughtContent>
</ChainOfThought>

Examples

Default

"use client"

import { ImageIcon, SearchIcon } from "lucide-react"

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

export function ChainOfThoughtDemo() {
  return (
    <div className="w-full">
      <ChainOfThought defaultOpen>
        <ChainOfThoughtHeader />
        <ChainOfThoughtContent>
          <ChainOfThoughtStep
            icon={SearchIcon}
            label="Searching for profiles for Hayden Bleasel"
            status="complete"
          >
            <ChainOfThoughtSearchResults>
              {[
                "https://www.x.com",
                "https://www.instagram.com",
                "https://www.github.com",
              ].map((website) => (
                <ChainOfThoughtSearchResult key={website}>
                  {new URL(website).hostname}
                </ChainOfThoughtSearchResult>
              ))}
            </ChainOfThoughtSearchResults>
          </ChainOfThoughtStep>

          <ChainOfThoughtStep
            icon={ImageIcon}
            label="Found the profile photo for Hayden Bleasel"
            status="complete"
          >
            <ChainOfThoughtImage caption="Hayden Bleasel's profile photo from x.com, showing a Ghibli-style man.">
              <img
                src="https://avatar.vercel.sh/haydenbleasel"
                alt="Example profile"
                className="aspect-square h-[150px] rounded-md border object-cover"
              />
            </ChainOfThoughtImage>
          </ChainOfThoughtStep>

          <ChainOfThoughtStep
            label="Hayden Bleasel is an Australian product designer, software engineer, and founder. He is currently based in the United States working for Vercel, an American cloud application company."
            status="complete"
          />

          <ChainOfThoughtStep
            icon={SearchIcon}
            label="Searching for recent work..."
            status="active"
          >
            <ChainOfThoughtSearchResults>
              {["https://www.github.com", "https://www.dribbble.com"].map(
                (website) => (
                  <ChainOfThoughtSearchResult key={website}>
                    {new URL(website).hostname}
                  </ChainOfThoughtSearchResult>
                )
              )}
            </ChainOfThoughtSearchResults>
          </ChainOfThoughtStep>
        </ChainOfThoughtContent>
      </ChainOfThought>
    </div>
  )
}

const steps = [
  {
    id: "1",
    title: "Understand the problem",
    content: "The user wants to build a responsive layout...",
  },
  {
    id: "2",
    title: "Consider solutions",
    content: "Options include CSS Grid, Flexbox, or a combination...",
  },
  {
    id: "3",
    title: "Plan implementation",
    content: "Use CSS Grid with media queries...",
  },
]
 
export default function Example() {
  return (
    <ChainOfThought>
      <ChainOfThoughtHeader>Reasoning Process</ChainOfThoughtHeader>
      <ChainOfThoughtContent>
        {steps.map((step, index) => (
          <ChainOfThoughtStep
            key={step.id}
            number={index + 1}
            title={step.title}
            isCompleted={index < steps.length - 1}
            isActive={index === steps.length - 1}
          >
            {step.content}
          </ChainOfThoughtStep>
        ))}
      </ChainOfThoughtContent>
    </ChainOfThought>
  )
}

Features

Step Tracking: Visual progress through reasoning steps
Collapsible: Expandable/collapsible content
Status Indicators: Shows completed, active, and pending steps
Badges: Status badges for each step

API Reference

ChainOfThought

Container for chain of thought.

Prop	Type	Default	Description
`open`	`boolean`	-	Controlled open state
`defaultOpen`	`boolean`	`false`	Initial open state
`onOpenChange`	`(open: boolean) => void`	-	Callback when state changes
`className`	`string`	-	Custom CSS classes

ChainOfThoughtHeader

Collapsible header/trigger.

Prop	Type	Default	Description
`children`	`ReactNode`	-	Header content
`className`	`string`	-	Custom CSS classes

ChainOfThoughtContent

Container for steps.

Prop	Type	Default	Description
`children`	`ReactNode`	-	Step components

ChainOfThoughtStep

Individual reasoning step.

Prop	Type	Default	Description
`number`	`number`	-	Step number
`title`	`string`	-	Step title
`isCompleted`	`boolean`	`false`	Whether step is completed
`isActive`	`boolean`	`false`	Whether step is currently active
`children`	`ReactNode`	-	Step content

Branch Code Block

On This Page

Installation Usage Examples Default Features API Reference ChainOfThought ChainOfThoughtHeader ChainOfThoughtContent ChainOfThoughtStep