AI Reasoning Panel: Free React + Tailwind Component

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.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add ai-reasoning-panel.en

New project or installation trouble? Start here →

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

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<AIReasoningPanel/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add https://webberui.com/r/ai-reasoning-panel.en.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

Bring this into your project

On this page