Dev Design LibraryConversation Components
Dev Design Library indexes 53 conversation components from 23 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. 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…
Chat Chat ListLobe UI · React
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 threadArc Library · ReactA chat thread with grouped messages, reactions, read receipts, typing, and a composer with attachments.
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…
Agent Chat PatternHalaska UI · React
Ai Chat WorkspaceSpaceUI · ReactFull-featured AI Studio chat workspace template featuring conversational threads, multi-model selection, real-time…
Aria Message ScrollerReScript shadcn · ReScript
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 Editable Message ListLobe UI · React
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.
Message Thread PatternHalaska UI · React
Base Message ScrollerReScript shadcn · ReScript
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 conversation components
Related categories
- React Conversation Components
- Tailwind CSS Conversation Components
- Animated Conversation Components
- shadcn/ui Conversation Components
- AI Element Components
- Prompt Input Components
- AI Orb Components
- Attachment Components
- Thinking Indicator Components
- Voice Input Components
- Model Selector Components
- Tool Call Components
- Sources Components
- Streaming Text Components
- Reasoning Components
- AI Message Components
- Citation Components
- Suggestions Components
- Task Queue Components
- Agent Plan Components