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.
mode-watcherrunedstreamdown-svelte@streamdown-svelte/code
Installation
Install dependencies
Install the required packages for this component:
Copy the Source Code
Copy and paste the following code into your project:
Examples
Demo
Props
Reasoning
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | - | Reasoning trigger and content blocks. |
class | string | - | Additional CSS classes for the wrapper. |
open | boolean | - | Controlled open state for the collapsible reasoning panel. |
onOpenChange | (open: boolean) => void | - | Called when the open state changes. |
isStreaming | boolean | false | Automatically opens while streaming and closes when streaming stops. |
ReasoningTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | - | Trigger label content. |
class | string | - | Additional CSS classes for the button. |
ReasoningContent
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | - | Fallback content rendered when no markdown string is provided. |
content | string | - | Markdown string rendered by Streamdown when present. |
class | string | - | Additional CSS classes for the outer content wrapper. |
contentClass | string | - | Additional CSS classes for the inner markdown container. |
markdown | boolean | false | Reserved for markdown-mode integrations. |