React AI Reasoning

Reasoning preview

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.

Install with AI

If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this AI component for you — no copy-paste, no CLI:

use shadcnio to install the reasoning AI component into my project

Related Components

FAQ