Reasoning
A collapsible component for showing AI reasoning, explanations, or logic. You can control it manually or let it auto-close when the stream ends. Markdown is supported.
Examples
Basic Usage
The most basic implementation of the Reasoning component with auto-close functionality when streaming ends.
With Markdown
Show rich formatting with markdown support for better structured reasoning content.
Installation
npx shadcn add "https://prompt-kit.com/c/reasoning.json"Component API
Reasoning
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | The content of the component | |
| className | string | Additional CSS classes | |
| open | boolean | Control the open state (makes component controlled) | |
| onOpenChange | (open: boolean) => void | Callback when open state changes | |
| isStreaming | boolean | When false, automatically closes the reasoning (auto-close) |
ReasoningTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | The content of the trigger | |
| className | string | Additional CSS classes | |
| ...props | HTMLAttributes | Additional HTML button props |
ReasoningContent
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | The content to be displayed | |
| className | string | Additional CSS classes | |
| contentClassName | string | Additional CSS classes for the content | |
| markdown | boolean | false | Enable markdown rendering for the content |
| ...props | HTMLAttributes | Additional HTML div props |