ThinkingBlock

ThinkingBlock

{/* While thinking */}
<ThinkingBlock thinking>
  Need to look up DTCG spec details before answering.
</ThinkingBlock>

{/* After done */}
<ThinkingBlock duration="4s" defaultOpen={false}>
  Considered: 1) DTCG community group spec status, 2) tooling support across Style Dictionary…
</ThinkingBlock>

Install: @helixui/core

import { ThinkingBlock } from '@helixui/core'

status: stable · since: 0.3.0

Tags: ai, reasoning, chain-of-thought, collapsible

Anatomy

[ ▶ Thinking…           ]   ← collapsed
[ ▼ Thinking…           ]
     reasoning paragraph 1
     reasoning paragraph 2

Layout

• display — block
• width — fill
• height — content
• intrinsicSize — fills width, hugs content
• stackable — true
• fullBleed — false

Visual

A muted card with a small “Thinking…” header and a collapsible body. Used to show LLM internal reasoning without making it the main attraction.

Props

Name	Type	Default	Description
label	ReactNode	—	Override the header label. Default depends on thinking/duration.
thinking	boolean	false	While true, shows a pulsing dot and the brand-colored rule.
duration	ReactNode	—	Append a duration to the default ‘Thought’ label (e.g. ‘4s’).
defaultOpen	boolean	false	Initially expanded.
open	boolean	—	Controlled state.
onOpenChange	(open) => void	—	Change handler.

Slots

• children — the reasoning text (whitespace preserved)

Tokens used

color.bg.action.brand.default, color.border.default, color.border.focus, color.text.secondary, color.text.muted, radius.sm, space.1, space.2, space.3, font.family.sans, font.size.sm

Accessibility

Notes

• Header button has aria-expanded. While thinking the pulsing dot animates; respect prefers-reduced-motion if you bring custom motion.

Composes with

Component	Relation	Note
ChatMessage	child	Inside an assistant message.
ToolCall	sibling	Often appears next to ToolCall blocks.

Prompt examples

These are the AI prompt → JSX mappings used by the helixui prompt DSL and integrations like Cursor / Claude Code.

expose chain-of-thought

“collapsible reasoning block in a chat”

<ThinkingBlock summary="Planning the response">
  Step 1: identify the question.
  Step 2: gather facts…
</ThinkingBlock>

Related

• ToolCall
• ChatMessage