Reasoning
Collapsible thinking-trace block for Anthropic-style reasoning or chain-of-thought scratchpads. Optional duration in the header.
Installation
pnpm
pnpm dlx @hex-core/cli add reasoningAPI Reference
| Prop | Type | Default | Description |
|---|---|---|---|
childrenrequired | ReactNode | — | Reasoning content. Wrap with Markdown for formatted thinking traces. |
defaultOpen | boolean | false | Start expanded. Default collapsed. |
durationMs | number | — | Time spent thinking in ms — renders "Thought for 4.2s" in the header. |
label | string | — | Override the default header label. |
className | string | — | Additional CSS classes. |
AI Guidance
When to use
Render Anthropic `thinking` blocks, chain-of-thought scratchpads, or any model-internal reasoning the user can optionally inspect.
When not to use
Don't use for the assistant's actual answer (use Message). Don't auto-open for routine turns — only worth expanding for debug or trust-building UX.
Common mistakes
- Showing reasoning that wasn't actually produced — fabricating thinking blocks erodes trust
- `durationMs` measured from request start instead of model thinking time — use the model's reported duration when available
Accessibility
Radix Collapsible — keyboard expand/collapse via Enter/Space. The italic header is decorative; use the visible label for screen readers.
Token budget: 280
Verified against @hex-core/components@1.12.0