AI Reasoning Panel

A collapsible panel for an AI's thinking process — expanding automatically while thinking, with a shimmering title and step-by-step reveal, then totalling the elapsed time and optionally collapsing itself.

Loading preview…

npx shadcn@latest add https://webberui.com/r/ai-reasoning-panel.json

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Thinkingthinking

Expanded by defaultdefaultOpen

Collapse when thinking endsautoCollapse

Auto-collapse delay (ms)collapseDelay

800

<AiReasoningPanel />

Installation

npx shadcn@latest add https://webberui.com/r/ai-reasoning-panel.json

Or, once registries are configured in components.json, install it as @webberui/ai-reasoning-panel.

Usage

import {
  AIReasoningPanel,
  AIReasoningTrigger,
  AIReasoningContent,
  AIReasoningStep,
} from "@/components/ui/ai-reasoning-panel";

<AIReasoningPanel thinking={isStreaming} autoCollapse>
  <AIReasoningTrigger />
  <AIReasoningContent>
    {steps.map((step) => (
      <AIReasoningStep key={step}>{step}</AIReasoningStep>
    ))}
  </AIReasoningContent>
</AIReasoningPanel>

Just bind thinking to the model's streaming state: when it flips to true the panel expands on its own, the title switches to a shimmering "Thinking…" and the clock starts; when it flips back to false the title settles into "Thought for N seconds", and with autoCollapse set it collapses itself after a delay.

Props

AIReasoningPanel

Prop	Type	Default	Description
`children`	`ReactNode`	—	Must contain `AIReasoningTrigger` and `AIReasoningContent`
`open`	`boolean`	—	Expanded state in controlled mode; when omitted, the component manages it internally
`onOpenChange`	`(open: boolean) => void`	—	Callback when the expanded state changes (fires in both controlled and uncontrolled modes)
`defaultOpen`	`boolean`	`false`	Initial expanded state in uncontrolled mode
`thinking`	`boolean`	`false`	Whether the model is thinking: flipping to `true` expands the panel and starts the clock
`autoCollapse`	`boolean`	`false`	Whether the panel collapses itself once thinking ends
`collapseDelay`	`number`	`800`	Delay between the end of thinking and the automatic collapse (ms)
`className`	`string`	—	Appended to the outer container's className

AIReasoningTrigger

Prop	Type	Default	Description
`children`	`ReactNode`	—	Custom title content; when omitted it shows "Thinking… / Thought for N seconds / Reasoning" based on the thinking state
`className`	`string`	—	Appended to the title button's className

AIReasoningContent

Prop	Type	Default	Description
`children`	`ReactNode`	—	The reasoning content, which can be presented step by step with `AIReasoningStep`
`className`	`string`	—	Appended to the content container's className

AIReasoningStep

Prop	Type	Default	Description
`children`	`ReactNode`	—	The content of a single reasoning step, revealed on mount with a fade in, an upward shift, and a de-blur
`className`	`string`	—	Appended to the step container's className

How it works

Expand / collapse transitions height: auto together with opacity, on a cubic-bezier(0.22, 1, 0.36, 1) timing curve
The title while thinking is rendered as a neutral gradient shimmer (bg-clip-text + a looping background offset), introducing no extra color token
The elapsed time is totalled once when thinking flips back to false, rounding anything under a second up to 1 so it never reads "Thought for 0 seconds"
AIReasoningStep suits streaming scenarios: each step animates in independently on mount, revealing the train of thought bit by bit
Every timer is cleaned up on state changes and on unmount

Accessibility

The title is a native button carrying aria-expanded and aria-controls, natively toggleable with Enter / Space
The content region carries role="region" and an aria-labelledby pointing at the title button, so assistive technology can tell which section it belongs to
When the user has "reduce motion" enabled at the system level: the height transition drops to zero in favor of a fade in / fade out, the shimmer degrades to static text, the step reveal loses its shift and blur, and the arrow rotation switches instantly

AI Reasoning Panel

On this page