Thinking

The dim "∴ Thinking…" line that expands to the model's thoughts.

import { ClaudeCodeTerminal } from "../components/claude-code-terminal";
import { ClaudeCodeThinking } from "../components/claude-code-thinking";

const THOUGHT =
  "The user wants the changes since v1.8.0. I'll read the git log first, then group the merged PRs by app so the answer maps to the monorepo layout.";

export default function ClaudeCodeThinkingExample() {
  return (
    <ClaudeCodeTerminal title="claude — thinking">
      <ClaudeCodeThinking>{THOUGHT}</ClaudeCodeThinking>
      <ClaudeCodeThinking defaultOpen label="Thought for 3s">
        {THOUGHT}
      </ClaudeCodeThinking>
    </ClaudeCodeTerminal>
  );
}

$ bunx --bun shadcn@latest add @notra/claude-code-thinking

A shadcn Collapsible, closed by default. The trigger is a dim italic ∴ line with a (click to expand) hint. Open, it shows the thought text in italics, indented under the line. It takes every Collapsible prop, like defaultOpen and onOpenChange.

Prop	Default	Description
`label`	`Thinking…`	The line next to the `∴`, like `Thought for 3s`.
`children`		The thought text shown when open.

Used in

Claude Code

A Claude Code terminal session with the compact header, tool calls, a running turn and the prompt.