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.

Installation

pnpm dlx shadcn-svelte@latest add https://svelte-ai-elements.vercel.app/p/reasoning.json

Examples

With Markdown

Show rich formatting with markdown support for better structured reasoning content.

Props

Reasoning

Name	Type	Default
`children`	`Snippet`
`class`	`string`
`open`	`boolean`
`onOpenChange`	`(open: boolean) => void`
`isStreaming`	`boolean`	`false`
`...props`	`HTMLAttributes<HTMLDivElement>`

ReasoningTrigger

Name	Type	Default
`children`	`Snippet`
`class`	`string`
`onclick`	`(event: MouseEvent) => void`
`...props`	`HTMLButtonAttributes`

ReasoningContent

Name	Type	Default
`children`	`Snippet`
`content`	`string`
`class`	`string`
`contentClassName`	`string`
`markdown`	`boolean`	`false`
`...props`	`HTMLAttributes<HTMLDivElement>`