Skip to content
comp0

comp0

Navigation

Reasoning

A collapsed disclosure for a model's reasoning or tool activity, busy while it thinks.

When to use it: Use it for optional model thinking or tool traces. For ordinary extra details use Disclosure.

On this page
  1. Example
  2. Anatomy
  3. Step by step
  4. Keyboard
  5. Forms and accessibility
  6. API reference

Example

Loading example…
Reasoning.tsxtsx
import { useEffect, useState } from "react";
import { Reasoning, ReasoningContent, ReasoningSummary } from "@comp0/react";

export function Example() {
  const [seconds, setSeconds] = useState(0);
  const thinking = seconds < 3;

  useEffect(() => {
    if (!thinking) return;
    const timer = setTimeout(() => setSeconds((current) => current + 1), 1000);
    return () => clearTimeout(timer);
  }, [thinking, seconds]);

  return (
    <Reasoning
      busy={thinking}
      className="max-w-sm rounded border border-zinc-950/10 p-3 dark:border-white/10"
    >
      <ReasoningSummary className="cursor-pointer text-base font-medium text-zinc-900 sm:text-sm dark:text-zinc-100">
        {thinking ? "Thinking…" : "Thought for 3 seconds"}
      </ReasoningSummary>
      <ReasoningContent className="pt-2 text-base text-zinc-600 sm:text-sm dark:text-zinc-400">
        Compared each audit result with the previous release and found no regressions.
      </ReasoningContent>
    </Reasoning>
  );
}

Anatomy

Dashed frames are invisible state providers; shaded shapes own real DOM. Numbered pins match the list below.

A wireframe sketch of the assembled component. Each numbered marker matches a part in the list that follows.

  1. Reasoning

    Native details element, collapsed by default. Owns a DOM element.

  2. ReasoningSummary

    Summary element that toggles the reasoning; its text states the phase. Owns a DOM element.

  3. ReasoningContent

    The revealed reasoning or tool activity. Owns a DOM element.

Step by step

  1. 1

    Add the main part

    Wrap ReasoningSummary and ReasoningContent in Reasoning.

  2. 2

    Add the supporting parts

    Write the summary yourself: 'Thinking…' while busy, then 'Thought for 4 seconds'.

  3. 3

    Make the behavior clear

    Set busy while the model thinks. It stays collapsed until the user opens it and never moves focus.

    Exampletsx
    <Reasoning busy={thinking}>
  <ReasoningSummary>{thinking ? "Thinking…" : "Thought for 4 seconds"}</ReasoningSummary>
  <ReasoningContent>{steps}</ReasoningContent>
</Reasoning>;

Keyboard

↵
Toggles the reasoning.
Space
Toggles the reasoning.

Forms and accessibility

No native form behavior.

Accessibility checklist

  • The summary text is the status: change it when thinking ends so the new state is exposed to assistive technology.
  • It never opens itself or takes focus while busy.
  • Do not put controls inside the summary.

API reference

Importtsx
import { Reasoning, ReasoningContent, ReasoningSummary } from "@comp0/react";

Reasoning

DOM element

Native details element, collapsed by default.

PropTypeDescription
busybooleanThe model is still thinking: sets aria-busy and holds nested warnings and focus moves.
openbooleanControlled open state.
defaultOpenbooleanInitial open state.
onOpenChange(open: boolean) => voidReceives the next open state.

ReasoningSummary

DOM element

Summary element that toggles the reasoning; its text states the phase.

ReasoningContent

DOM element

The revealed reasoning or tool activity.

Style hooks

Attributes that appear while a state is true. Target them with Tailwind data variants such as data-open:bg-zinc-100, or with any CSS selector.

Reasoning

Style hookMeaning
[data-open]The reasoning is open.
[data-busy]The model is thinking, or an ancestor is busy.

ReasoningSummary

Style hookMeaning
[data-open]The reasoning is open.

ReasoningContent

Style hookMeaning
[data-open]The reasoning is open.

Keep exploring