Reasoning

A component for displaying collapsible reasoning or thought process content, perfect for AI applications that need to show their "thinking" or step-by-step explanations.

Examples

Basic Usage

The most basic implementation of the Reasoning component with collapsible content.

I calculated the best color balance

With AI Response

Combine with the ResponseStream component to show streaming AI reasoning content.

The square root of 144 is 12.

Controlled Component

Control the open state programmatically for advanced use cases.

The result of the calculation is 256.

State: Closed

Custom Styling

Customize the appearance of the Reasoning component to match your application's design. You can also use markdown in the ReasoningResponse component to style the content.

The most efficient algorithm for this problem is Quick Sort, with O(n log n) time complexity.

Installation

npx shadcn add "https://prompt-kit.com/c/reasoning.json"

Component API

Reasoning

Prop	Type	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

ReasoningTrigger

Prop	Type	Description
children	React.ReactNode	The content of the trigger
className	string	Additional CSS classes
...props	HTMLAttributes	Additional HTML button props

ReasoningContent

Prop	Type	Description
children	React.ReactNode	The content to be displayed
className	string	Additional CSS classes
...props	HTMLAttributes	Additional HTML div props

ReasoningResponse

Prop	Type	Description
text	string \| AsyncIterable<string>	The text to display or stream
className	string	Additional CSS classes
...props	ResponseStreamProps	Additional ResponseStream props (except textStream)