Reasoning Disclosure

FreeNew

A collapsible panel for a model's reasoning that opens while it thinks and collapses to "Thought for 12s" when done.

The full demo as documented.

Customize

Derived from this item’s props table, because it declares no controls of its own. Changes drive the preview live.

streaming

duration1

open

defaultOpen

autoCollapse

contentClassName


pnpm dlx shadcn@latest add https://ui.tealmac.com/r/reasoning-disclosure.json

import { ReasoningDisclosure } from "@/components/ui/reasoning-disclosure"

<ReasoningDisclosure streaming={isThinking} duration={12}>
  {reasoningText}
</ReasoningDisclosure>

Prop	Type	Default	Description
`streaming`	`boolean`	`false`	True while the model is reasoning. Shows "Thinking…" and opens the panel.
`duration`	`number`	-	Seconds spent reasoning. Shown as "Thought for 12s" once streaming ends.
`open`	`boolean`	-	Controlled open state. When set, `streaming` no longer opens or closes it.
`defaultOpen`	`boolean`	`streaming`	Initial open state when uncontrolled.
`onOpenChange`	`(open: boolean) => void`	-	Called when the panel opens or closes, including automatic changes.
`autoCollapse`	`boolean`	`true`	Collapse when streaming ends (uncontrolled only).
`label`	`ReactNode`	-	Replaces the header text.
`contentClassName`	`string`	-	Classes for the content panel.

Also accepts all <div> props.

formatThoughtDuration(seconds) is exported for use elsewhere.

The "Thinking…" shimmer is replaced by plain text when the user prefers reduced motion.
The trigger is a button with aria-expanded, from Radix Collapsible.

Guide and examples


pnpm dlx shadcn@latest add https://ui.tealmac.com/r/reasoning-disclosure.json

import { ReasoningDisclosure } from "@/components/ui/reasoning-disclosure"

<ReasoningDisclosure streaming={isThinking} duration={12}>
  {reasoningText}
</ReasoningDisclosure>

Prop	Type	Default	Description
`streaming`	`boolean`	`false`	True while the model is reasoning. Shows "Thinking…" and opens the panel.
`duration`	`number`	-	Seconds spent reasoning. Shown as "Thought for 12s" once streaming ends.
`open`	`boolean`	-	Controlled open state. When set, `streaming` no longer opens or closes it.
`defaultOpen`	`boolean`	`streaming`	Initial open state when uncontrolled.
`onOpenChange`	`(open: boolean) => void`	-	Called when the panel opens or closes, including automatic changes.
`autoCollapse`	`boolean`	`true`	Collapse when streaming ends (uncontrolled only).
`label`	`ReactNode`	-	Replaces the header text.
`contentClassName`	`string`	-	Classes for the content panel.

Also accepts all <div> props.

formatThoughtDuration(seconds) is exported for use elsewhere.

The "Thinking…" shimmer is replaced by plain text when the user prefers reduced motion.
The trigger is a button with aria-expanded, from Radix Collapsible.