Tailwind CSS Conversation Components

Dev Design Library indexes 46 Tailwind CSS conversation components from 19 open-source UI libraries, with the most coming from ReUI, Notra, beUI, LocalMode and Cojeev UI. Each one links to its page with the source code, a live preview where available, the library license and the install command. Every library in this list styles its components with Tailwind CSS utility classes. Conversation components belong to the AI group.

• Message Scrollershadcn/ui · ReactA chat scroll container that anchors turns, opens saved transcripts, follows streamed responses, loads history without…
• Ai ChatReact Spectrum · React
• Support thread with sender alignmentReUI · ReactA two sided billing thread where align and variant carry the sender.
• ConversationAI Elements · ReactWraps messages and automatically scrolls to the bottom. Also includes a scroll button that appears when not at the…
• AI Conversation BranchesKokonut UI · ReactA chat where editing a message starts a new branch. A small tree beside it shows every version, and you can jump…
• Ai SidebarbeUI · ReactComposes the shell with editable projects, folders, files, and bookmarks.
• AI Chat CardSpectrum UI · ReactAn AI chat card that types prompts into its composer, with send, attach and reset actions.
• Skeleton 06 - Chat ConversationShadcn Space · ReactChat skeleton with a contact header, incoming and outgoing message bubbles of varied length, and a message composer.
• Discord Chat CardOpenSourceUI · React
• Agent ChatBoardUI · React
• ConversationAI Elements (Svelte) · SvelteA sticky-bottom conversation container with empty state and scroll-to-bottom controls for chat interfaces.
• ChatGPTNotra · ReactA full recreation of a ChatGPT conversation with thinking, web search, reasoning and the model picker, built on shadcn…
• Template AiShark UI · React
• Chat ThreadUI Lab · ReactReplies arrive after a beat of typing, and the thread follows only if you are.
• Chat BlockLocalMode · ReactThe flagship on-device chat: a 76-model multi-provider selector (transformers, WebLLM, wllama GGUF, LiteRT) with…
• Agent chatCojeev UI · ReactA composable agent conversation with a bounded thread, draft composer, attachments, progress, explicit permissions and…
• Ai Chat WorkspaceSpaceUI · ReactFull-featured AI Studio chat workspace template featuring conversational threads, multi-model selection, real-time…
• Glass MessageOpaline · ReactChat bubbles on glass: tinted for you, clear for them, with avatars, meta and a typing indicator.
• Message ListFibo · ReactA conversation that groups each person's messages under one heading, with a single tab stop.
• Bubble variants in a release threadReUI · ReactAll seven variants doing the job each one is for, in one deploy thread.
• Chat AppbeUI · ReactA complete agent conversation workspace composing navigation, messages, streaming, planning, approvals, tools, code…
• ChatGPT ThreadNotra · ReactThe ChatGPT conversation column with auto-scroll, a scroll-to-bottom button and a pinned footer.
• RAG Chat BlockLocalMode · ReactStreaming grounded RAG over its OWN text/PDF corpus — token-by-token answers through the engine-owned generator…
• Conversation panelCojeev UI · ReactA reusable conversation panel composed from Cojeev base components.
• Grouped consecutive messagesReUI · ReactConsecutive turns from one sender collapse into a single BubbleGroup.
• Message ScrollerbeUI · ReactCan fill the inset with the selected conversation.
• ClaudeNotra · ReactA full recreation of the claude.ai chat with web search, serif replies, message actions and the model picker, built on…
• ConversationLocalMode · ReactScrollable message-display surface with first-class scroll-anchoring: auto-pins to the newest content while tokens…
• Message ScrollerCojeev UI · ReactKeeps a conversation near its latest content while allowing readers to scroll back without being pulled down.
• Message reactions and a reaction buttonReUI · ReactA static emoji row, a pressable reaction with a count, and a top anchored row.
• Claude CodeNotra · ReactA Claude Code terminal session with the compact header, tool calls, a running turn and the prompt, built from the…
• Long reply with show moreReUI · ReactA long assistant answer folds to its first paragraph behind a Collapsible.
• CodexNotra · ReactA full recreation of an OpenAI Codex CLI session built from the Codex components on shadcn Base UI.
• Quick reply bubbles and an action rowReUI · ReactTinted bubbles that are real buttons and a link, plus an action row after the pick.
• GeminiNotra · ReactA full recreation of the Gemini chat built from the Gemini components on shadcn Base UI.
• Assistant answer with formatted contentReUI · ReactA ghost bubble carrying a heading, a list, emphasis and inline code.
• Google AI OverviewNotra · ReactA full recreation of Google's AI Overview built from the AI Overview components on shadcn Base UI.
• Two-sided conversationReUI · ReactIncoming and outgoing rows separated by nothing but the align prop.
• OpenCodeNotra · ReactA recreation of an OpenCode terminal session with a transcript, the prompt and the sidebar.
• Avatars on both sidesReUI · ReactBottom-anchored avatars that flip with the row, plus a presence dot.
• PerplexityNotra · ReactA full recreation of a Perplexity thread with search steps, citations, sources sheet, composer and a replayable…
• Sender name and delivery statusReUI · ReactHeader for identity, footer for status, and how each one picks its side.
• Reply actions in the footerReUI · ReactCopy, regenerate and rating controls under an unframed assistant reply.
• Files shared in a threadReUI · ReactImage and document attachments stacked with the bubble in one message.
• Consecutive messages from one senderReUI · ReactA run of three messages under a single avatar, using MessageGroup.
• Streaming reply with a pending stateReUI · ReactOne assistant row moving from thinking, to typing, to settled.

Libraries with Tailwind CSS conversation components

• ReUI
• Notra
• beUI
• LocalMode
• Cojeev UI

Related categories

• Conversation Components
• React Conversation Components
• Animated Conversation Components
• shadcn/ui Conversation Components
• Tailwind CSS AI Element Components
• Tailwind CSS Prompt Input Components
• Tailwind CSS Attachment Components
• Tailwind CSS Voice Input Components
• Tailwind CSS Model Selector Components
• Tailwind CSS Thinking Indicator Components
• Tailwind CSS Tool Call Components
• Tailwind CSS Sources Components
• Tailwind CSS Citation Components
• Tailwind CSS AI Message Components
• Tailwind CSS Reasoning Components
• Tailwind CSS AI Orb Components
• Tailwind CSS Streaming Text Components
• Tailwind CSS Suggestions Components
• Tailwind CSS Task Queue Components
• Tailwind CSS Agent Plan Components