React AI Reasoning

You know those "thinking" blocks Claude shows while it's reasoning through a problem? This component does that. It auto-opens when the AI starts thinking, shows a shimmer effect while streaming, tracks how long the thinking took, and then auto-collapses when done so it doesn't clutter up the chat. Users can always click to expand it again if they're curious. The trigger shows a brain icon and "Thought for X seconds" so users know what happened. Great for extended thinking models where you want to show the reasoning but not have it dominate the conversation. Markdown rendering is built in via Streamdown.

Reasoning preview

Installation

npx shadcn@latest add https://www.shadcn.io/registry/reasoning.json

npx shadcn@latest add https://www.shadcn.io/registry/reasoning.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/reasoning.json

bunx shadcn@latest add https://www.shadcn.io/registry/reasoning.json

Related Components

FAQ