Skip to content
Pinky UI

reasoning

Thinking Panel

A collapsible reasoning panel that swaps its label between "thinking" and "thought for Xs".

  • reasoning
  • chat
  • disclosure
  • agent

Live preview

Checked three sources, compared timestamps, settled on the most recent.

Quick usage

usage
import { ThinkingPanel } from "@pinky-ui/ai-ui";

<ThinkingPanel thinking={isReasoning} duration={reasoningSeconds}>
  {reasoningTrace}
</ThinkingPanel>

Presets

Default

Starts collapsed; the reasoning is available but out of the way.

Default behaviour

Expanded

Starts open — for agent traces the user usually wants to inspect.

defaultOpen={true}

Install

Add @pinky-ui/ai-ui as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/ai-ui

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

PropTypeDefaultDescription
childrenReactNode—The reasoning content, shown when the panel is open.
thinkingbooleanfalseStill receiving reasoning tokens. Keeps the indicator pulsing and shows the live label.
durationnumber—Seconds spent reasoning, shown in the label once `thinking` is false.
labelstring"Thinking"The panel's base label.
defaultOpenbooleanfalseWhether the panel starts expanded, for an uncontrolled panel.
openboolean—Controlled open state.
onOpenChange(open: boolean) => void—Fires when the panel is toggled.
classNamestring—Applied to the outer element.

Accessibility

  • The trigger is a real `<button>` with `aria-expanded` and `aria-controls`.
  • The content region carries `role="region"` with a matching `aria-label`.

Performance

  • The expand/collapse animation measures height via Motion's layout animation, not a JS-driven resize loop.

Reduced motion

The panel still expands and collapses; only the height/opacity transition and the pulsing indicator are removed.

When to use

  • Surfacing an agent's reasoning trace without making it the default focus of the conversation.
  • Any "working" state that resolves into a short summary.

When not to use

  • Content the user needs to see immediately — don't hide required output behind a disclosure.