AI chat UI components for React
Free AI chat UI components for React: message threads, streaming text, prompt input with attachments, tool calls, reasoning blocks, citations and model picker.
34 itemsFree, MITshadcn CLI compatibleTailwind CSS v4Light and dark
Building an AI product means building a lot of interface that did not exist a few years ago: streaming messages, tool calls that can be expanded, reasoning that can be hidden, citations, token usage and a composer that takes files.
These components are provider agnostic. They render state you pass in, so they work with any model API or SDK, and the ai-chat guide shows how to wire them to a streaming response.
Components 33
Agent TraceuiReact timeline of an AI agent run: each tool step shows pending, running, done or error, reports its duration and folds out details. The header sums up the run.npx shadcn@latest add ui.minidev.pro/r/agent-trace.jsonAi ComposeruiChat input for AI apps with a multiline textarea, Enter to send, suggestion chips, attach button, model picker and a stop button while a response streams.npx shadcn@latest add ui.minidev.pro/r/ai-composer.jsonArtifact PreviewuiFramed preview for AI generated artifacts such as code, documents or UI, with a title bar, copy button and optional expand action for a full view.npx shadcn@latest add ui.minidev.pro/r/artifact-preview.jsonAttachment ChipuiCompact Tailwind file chip with a paperclip icon, truncated filename and an optional remove button, for attachments in chat composers, emails and forms.npx shadcn@latest add ui.minidev.pro/r/attachment-chip.jsonChat ThreaduiScrolling chat thread for React that renders user, assistant and system messages as bubbles, auto scrolls to the newest one and uses a live log role.npx shadcn@latest add ui.minidev.pro/r/chat-thread.jsonCitation ChipuiInline citation button for AI answers, with an accent source number and label. Link it to a source panel or popover so users can check references.npx shadcn@latest add ui.minidev.pro/r/citation-chip.jsonContext ChipuiSmall toggle chip for picking context in AI prompts or filters, with an active accent state and hover styling. Passes through all native button props.npx shadcn@latest add ui.minidev.pro/r/context-chip.jsonContext PilluiRounded pill for showing attached context, such as files or pages in an AI prompt, with a truncated label and an optional remove button.npx shadcn@latest add ui.minidev.pro/r/context-pill.jsonConversation SidebaruiReact chat history sidebar with a New chat button and a scrolling list of conversations showing title and relative time. Highlights the active chat.npx shadcn@latest add ui.minidev.pro/r/conversation-sidebar.jsonFeedback ThumbsuiThumbs up and thumbs down buttons for rating an answer or article. Uses aria-pressed, toggles off on a second click, and works controlled or uncontrolled.npx shadcn@latest add ui.minidev.pro/r/feedback-thumbs.jsonMarkdown RendereruiA small React renderer for AI output that splits text into paragraphs on blank lines and turns fenced code blocks into scrollable monospace panels.npx shadcn@latest add ui.minidev.pro/r/markdown-renderer.jsonMessage ActionsuiA row of ghost icon buttons for chat replies: copy, retry, good response and bad response, each with an aria label and callback. Place it under AI messages.npx shadcn@latest add ui.minidev.pro/r/message-actions.jsonMessage BubbleuiA React chat message for user, assistant and system roles: user turns sit in a right aligned capsule, assistant replies read as prose, with a streaming cursor.npx shadcn@latest add ui.minidev.pro/r/message-bubble.jsonModel CompareuiA comparison table for AI models listing name, latency with a color coded badge, cost and a quality note per row. Helps users pick between LLM providers.npx shadcn@latest add ui.minidev.pro/r/model-compare.jsonModel PickeruiA dropdown for choosing an AI model, built on the Select component with an accessible trigger and a placeholder. Pass an array of models and read the chosen id.npx shadcn@latest add ui.minidev.pro/r/model-picker.jsonPinned MessageuiA highlighted pinned note for chat channels and threads with a pin icon, a Pinned by author line and the message body on an accent tinted Tailwind background.npx shadcn@latest add ui.minidev.pro/r/pinned-message.jsonPrompt Input With AttachmentsuiThe AI prompt composer with an Attach file button and helper text above it, forwarding every PromptInput prop. For chat apps that accept documents or images.npx shadcn@latest add ui.minidev.pro/r/prompt-input-attachments.jsonPrompt InputuiAn AI chat composer that grows with its content, sends on Enter, adds a newline on Shift Enter and has attach, toolbar and send controls. Built for React.npx shadcn@latest add ui.minidev.pro/r/prompt-input.jsonPrompt LibraryuiA searchable list of saved prompts that filters by title, body and tag as you type and returns the chosen prompt through onSelect. Useful in React AI apps.npx shadcn@latest add ui.minidev.pro/r/prompt-library.jsonRead ReceiptuiMessage read receipt icon that shows a single check for sent, a double check for delivered, and an accent double check once read. Labelled for screen readers.npx shadcn@latest add ui.minidev.pro/r/read-receipt.jsonReasoning BlockuiCollapsible AI reasoning block, folded by default. The title shimmers while the model is thinking, then reads Thought for Ns, with an animated height reveal.npx shadcn@latest add ui.minidev.pro/r/reasoning-block.jsonRegenerate BaruiFooter bar for AI answers with a Not quite right prompt, a Regenerate button with a refresh icon, and an optional Edit prompt action when onEdit is set.npx shadcn@latest add ui.minidev.pro/r/regenerate-bar.jsonSource CarduiCitation source card for AI answers showing a title, a source badge, the truncated URL and a short snippet. List references under a generated response.npx shadcn@latest add ui.minidev.pro/r/source-card.jsonStop GeneratinguiStop generating button with a filled square icon and an onClick handler, for cancelling a streaming AI response mid-answer in chat interfaces built with React.npx shadcn@latest add ui.minidev.pro/r/stop-generating.jsonStreaming CursoruiBlinking caret that sits inline at the end of streaming text, sized to the line and hidden from screen readers. Signals an AI response is still arriving.npx shadcn@latest add ui.minidev.pro/r/streaming-cursor.jsonStreaming MessageuiChat message bubble that renders partial AI output with a blinking caret at the end, for showing token-by-token streaming responses in a Tailwind chat UI.npx shadcn@latest add ui.minidev.pro/r/streaming-message.jsonSuggestion ChipsuiRow of rounded suggestion chips such as Summarize or Find bugs that call onSelect when clicked. Use them as prompt starters under a React AI chat input.npx shadcn@latest add ui.minidev.pro/r/suggestion-chips.jsonThinking BlockuiReact Thinking panel with a chevron header and aria-expanded that reveals the model's intermediate reasoning in muted text. Collapsed by default in chat.npx shadcn@latest add ui.minidev.pro/r/thinking-block.jsonToken Usage MeteruiLLM token usage meter showing tokens used against a monthly limit, a labelled progress bar and a percent of budget note with the reset date. Useful in AI apps.npx shadcn@latest add ui.minidev.pro/r/token-usage-meter.jsonTool Call CarduiAgent tool call card showing the tool name, argument preview, duration and a running, done or failed status chip, with collapsible monospace output below.npx shadcn@latest add ui.minidev.pro/r/tool-call-card.jsonTool Call CollapseduiCompact collapsed tool call row with a rotating chevron and monospace tool name that expands to show its details. Keeps agent traces tidy inside chat threads.npx shadcn@latest add ui.minidev.pro/r/tool-call-collapsed.jsonTool Result PaneluiTool result panel with the tool name, a success, error or running status badge and the output shown in a JSON code block. Built in React for AI agent UIs.npx shadcn@latest add ui.minidev.pro/r/tool-result-panel.jsonTyping IndicatoruiTailwind typing indicator with three pulsing dots in a rounded pill, staggered by 120ms, with role status and a Typing label. Shows someone is replying in chat.npx shadcn@latest add ui.minidev.pro/r/typing-indicator.json
Blocks and full pages 1
Frequently asked questions
Do these work with the Vercel AI SDK or OpenAI?
Yes. They are presentational components, so you pass messages and streaming state from whichever SDK or fetch call you use.
How do I stream a response into the UI?
Read the response body with a stream reader and append each chunk to the last message. The streaming message component shows a caret while text arrives.
Can I show tool calls and reasoning?
Yes. Tool call cards show arguments, status and results, and the reasoning block collapses long thinking by default.