Question 1

What are shadcn React AI components?

Accepted Answer

shadcn React AI components are a collection of 50 copy-paste primitives for building AI chat interfaces in React and Next.js — message, conversation, prompt-input, reasoning, tool, sources, code-block, artifact, agent, and more. Each component is a single self-contained TSX file that drops straight into your components folder. Built on shadcn/ui and Tailwind CSS, the AI SDK's streaming primitives, and react-markdown — everything you need to ship a Claude / ChatGPT-style chat UI in a day.

Question 2

Are shadcn AI components free?

Accepted Answer

Yes — all 50 shadcn React AI components are completely free. Every chat primitive (message, conversation, prompt-input), reasoning + tool-use display, agent / artifact / sandbox / canvas, and voice / code panel — free for personal and commercial projects. No account required, no gating, no attribution. The shadcn.io Pro subscription unlocks 6,000+ premium BLOCKS (heroes, pricing tables, dashboards), 100 animated backgrounds, 57 WebGL shaders, and 40 animated buttons — the AI surface stays free, always.

Question 3

Is this the same as the AI SDK Elements from Vercel?

Accepted Answer

The AI SDK Elements from Vercel are the Apache-2.0 primitives these components are built on top of (the `Message`, `Conversation`, `PromptInput`, `Reasoning`, `Tool` families). shadcn.io ships them as copy-paste TSX files you own, with shadcn/ui styling baked in, plus 40+ additional primitives that don't exist in the base SDK — agent configs, artifact panels, sandboxes, terminals, file trees, model selectors, and more. All credit to Vercel for the primitives; shadcn.io layers the design system and the extra components.

Question 4

What should I pick for a basic chat UI?

Accepted Answer

For a Claude / ChatGPT-style chat: start with Conversation (container), Message (user + assistant bubbles), and PromptInput (bottom input bar). Add Loader for streaming states, Reasoning when the model exposes a thinking block, Tool when it calls functions, and Sources + InlineCitation when it cites search results. That's 8 components — all free — and covers the foundational chat paradigm.

Question 5

How do I install a shadcn React AI component?

Accepted Answer

Open the component's docs page (for example shadcn.io/ai/message) and copy the one-line `npx shadcn@latest add` command. The shadcn CLI writes the component into `components/ai/` (or wherever your components.json points), pulls in peer dependencies like `react-markdown` + `streamdown`, and includes the `cn()` helper. Import, drop it into your chat page, wire it to your AI SDK `useChat()` hook, ship it.

Question 6

Do shadcn AI components work with the Vercel AI SDK?

Accepted Answer

Yes. Most components are designed around the AI SDK's message + part + tool shape — Message takes `from='user' | 'assistant'`, ToolDisplay takes a tool-call + tool-result pair, Reasoning takes a reasoning part. Wire them to `useChat()` from `ai/react` and stream responses render correctly with no extra glue. Works equally well with other runtimes (LangChain, raw OpenAI, Anthropic) — the components accept plain React children so any shape can be adapted.

Question 7

Can I customise colors and typography?

Accepted Answer

Yes. Every component reads shadcn/ui CSS tokens (`--primary`, `--muted`, `--foreground`, `--border`) so it flips automatically when your app toggles `.dark`. Typography inherits from your Tailwind prose config — override per-component by passing `className` props that the forwarded ref merges via `cn()`. Markdown output uses `streamdown` with shiki for code highlighting so the syntax theme switches with your light/dark mode.

Question 8

Do the components support streaming?

Accepted Answer

Yes. Message + Response handle partial text updates via react-markdown's streaming-safe renderer (code fences don't close prematurely, lists re-hydrate as tokens arrive, headings stay stable). Reasoning and Tool components gracefully render incremental thought streams and in-progress tool calls. Loader ships the three common states (pending → streaming → complete) so you can stop-motion the chat UI during token bursts without layout jitter.

Question 9

What streaming markdown renderer do shadcn AI components use?

Accepted Answer

shadcn.io AI components use streamdown — a streaming-safe react-markdown wrapper that handles partial tokens correctly: unclosed code fences render as code (not as raw backticks + text), partial tables don't break the DOM tree, lists stay progressively correct. Code blocks use shiki for syntax highlighting with a light + dark theme pair that inherits from your shadcn/ui color tokens.

Question 10

How does tool-call display work?

Accepted Answer

Tool takes a tool-call + tool-result pair (matching the AI SDK's tool shape). When the model is calling a tool, the component renders a pending state with the tool name + input preview. When the result arrives, it collapses into a summary with an expandable `Show details` toggle that reveals the raw JSON input + output. Use Tool for most cases; Agent for showing a whole agent configuration with available tools.

Question 11

Does Reasoning stream thinking in real time?

Accepted Answer

Yes. Reasoning accepts a streaming text source (from the AI SDK's reasoning part). While the model is thinking, tokens render as they arrive inside a collapsed `Thinking…` card. When the main response starts, the card auto-collapses (you can toggle to expand). Works with Claude 3.7/4 extended thinking, OpenAI o1 / o3 reasoning, and DeepSeek-R1.

Question 12

How do I abort a running stream?

Accepted Answer

The components themselves are pure display — abort logic lives in your AI SDK `useChat()` hook (`stop()` method). PromptInput ships a default stop-while-streaming button that fires `onStop` when the user clicks it. Wire that to your hook's stop handler and the streaming Message stops rendering new tokens mid-flight.

Question 13

Which React and Next.js versions do shadcn AI components support?

Accepted Answer

React 19+ and Next.js 16+ are the baseline, with full App Router support. Every shadcn AI component is marked "use client" because streaming + interaction require the browser. They also work with Vite + React, Remix, Astro islands, and React 18 apps — the components don't depend on React-19-specific hooks. Any framework that can mount a client component can host a shadcn.io AI chat.

Question 14

Do shadcn AI components work with Tailwind v3 AND v4?

Accepted Answer

Both. Utility class names are identical across Tailwind v3 and v4. Components that read shadcn/ui CSS variables (`--primary`, `--muted`, `--border`) inherit them the same way in either major version. The typography plugin is optional — Message will render fine without it, but adding `@tailwindcss/typography` gives you the full prose styling for markdown output.

Question 15

What extra dependencies do shadcn AI components pull in?

Accepted Answer

Minimal. The chat primitives (Message, Conversation, PromptInput) need `clsx + tailwind-merge` (already shipped with shadcn/ui) plus `lucide-react` for icons. Streaming markdown rendering uses `streamdown` + `react-markdown` + `shiki` (for code highlighting). Tool-use components are built on top of the AI SDK's `ai` + `@ai-sdk/react` packages if you're using the SDK; they render fine without it too (just pass matching props).

Question 16

Can I contribute a new shadcn AI component?

Accepted Answer

Yes. shadcn.io is open-source on GitHub. Open a PR with a new TSX file under `packages/ai/` following the existing JSDoc pattern: `@title / @description / @opening / @credit / @related / @questions`, a named export for the component(s), and a default `{Name}Demo()` wrapper for the gallery preview. The docs MDX, gallery card, and OG screenshot regenerate automatically via the build scripts.

React Components for Conversational AI.

Every AI component, grouped by family

Every AI component. One prompt away.

Grab your MCP URL

Paste into your editor

Prompt as usual

Frequently Asked Questions