Chain of Thought
The ChainOfThought component provides a visual representation of an AI's reasoning process, showing step-by-step thinking with support for search results, images, and progress indicators. It helps users understand how AI arrives at conclusions.
Searching for profiles for Hayden Bleasel
www.x.comwww.instagram.comwww.github.com
Found the profile photo for Hayden Bleasel
Hayden Bleasel's profile photo from x.com, showing a Ghibli-style man.
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.
Searching for recent work...
www.github.comwww.dribbble.com
Installation
If you prefer using jsrepo, please install via the command below:
Usage
Props
ChainOfThought
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | - | Controls whether the chain of thought is expanded (bindable) |
defaultOpen | boolean | false | Whether the chain of thought is expanded by default |
onOpenChange | (open: boolean) => void | - | Callback function called when the open state changes |
class | string | - | Additional CSS classes to apply to the container |
children | Snippet | - | Child components (typically ChainOfThoughtHeader and ChainOfThoughtContent) |
...restProps | HTMLAttributes<HTMLDivElement> | - | All other div props are supported |
ChainOfThoughtHeader
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | - | Additional CSS classes to apply to the header trigger |
children | Snippet | - | Custom content to render instead of the default 'Chain of Thought' text |
ChainOfThoughtContent
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | - | Additional CSS classes to apply to the content container |
children | Snippet | - | Chain of thought steps and content to display when expanded |
ChainOfThoughtStep
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | - | The main label/title for the step |
icon | typeof Icon | - | Lucide icon component to display for the step |
description | string | - | Optional description text for the step |
status | 'complete' | 'active' | 'pending' | 'complete' | Visual status of the step |
delay | number | - | Custom animation delay in milliseconds (defaults to 150ms * step index) |
class | string | - | Additional CSS classes to apply to the step |
children | Snippet | - | Additional content to display within the step |
...restProps | HTMLAttributes<HTMLDivElement> | - | All other div props are supported |
ChainOfThoughtImage
| Prop | Type | Default | Description |
|---|---|---|---|
caption | string | - | Caption text to display below the image |
class | string | - | Additional CSS classes to apply to the image container |
children | Snippet | - | Image element or content to display |
...restProps | HTMLAttributes<HTMLDivElement> | - | All other div props are supported |
ChainOfThoughtSearchResults
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | - | Additional CSS classes to apply to the search results container |
children | Snippet | - | ChainOfThoughtSearchResult components to display |
...restProps | HTMLAttributes<HTMLDivElement> | - | All other div props are supported |
ChainOfThoughtSearchResult
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | - | Additional CSS classes to apply to the search result badge |
children | Snippet | - | Content to display in the search result badge |
...restProps | HTMLAttributes<HTMLElement> | - | All other Badge component props are supported |