Dev Design LibraryChat Message Components
Dev Design Library indexes 91 chat message components from 34 open-source UI libraries, with the most coming from ReUI, Notra, LocalMode, Halaska UI and beUI. Each one links to its page with the source code, a live preview where available, the library license and the install command. Chat message components belong to the Social group.
Bubbleshadcn/ui · ReactDisplays conversational content in a message bubble. Supports variants, alignment, grouping, reactions, and…
Ai User MessageReact Spectrum · React
Chatcoss ui · ReactComposable chat components with messages, reactions, replies, and delivery states.
Illustration Comment BubbleCult UI · ReactComment bubble illustration for code or chat UI
Support thread with sender alignmentReUI · ReactA two sided billing thread where align and variant carry the sender.
Typing IndicatorAmicro Micro Transitions · ReactTyping Indicator loading animation.
MessageAI Elements · ReactA comprehensive suite of components for displaying chat messages, including message rendering, branching, actions, and…
Chat Chat ItemLobe UI · React
AI HandoffKokonut UI · ReactThe assistant hands the chat to a person, with what they will see so you don't repeat yourself. The queue counts down…
Bubble CursorCursify · React
MessagebeUI · ReactAdds sender alignment, metadata, and avatar placement.
Voice NoteRare UI · ReactA voice message bar with a scrubbable waveform and a play control.
Chat MessageFluid Functionalism · ReactA single chat transcript entry with baked-in entrance and layout motion. Right-aligned accent bubble for the user…
MessagePanel UI · React NativeChat turn with avatar, bubble, header and footer.
Context Menu-02 - Radial BubbleShadcn Space · ReactSpring-animated radial bubble menu that fans colored icon buttons in a circle from a central trigger
Discord Chat CardOpenSourceUI · React
MessageAI Elements (Svelte) · SvelteA full chat message system with branching, attachments, actions, and markdown streaming responses.
AI OverviewNotra · ReactThe AI Overview root, built on shadcn Collapsible and Button, with a collapsible Show more.
Mobile MockupGreatUI · React
Message ActionsAI CSS · 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.
BubbleHextaUI · ReactChat message bubbles with variants, grouped corners, reactions and room for interactive content.
BranchLocalMode · ReactA message-versioning navigator that pages between regenerated/edited assistant variants for one turn, with prev/next…
BubbleCojeev UI · ReactGroups conversational content and timestamps into visually distinct message bubbles.
Agent Chat PatternHalaska UI · React
BubbleSpaceUI · ReactRenders floating animated bubbles across the background that smoothly move and drift away when users move their mouse.
Aria BubbleReScript shadcn · ReScript
Cursor BubbleSora UI · ReactA floating label that follows the cursor and elastic-pops into view over interactive targets, powered by GSAP.
BubbleD2Studio UI · ReactA chat message bubble that aligns and colours itself by sender.
Message BubbleEaseUI · ReactA focused conversational surface with visual tones, independent alignment, and a speech-bubble tail that pops in on…
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.
AI Answer 03ReactFrame · ReactAn agent-style AI answer card, a researching/reading/writing step tracker with a progress rail, markdown-style bold…
Messageshadcn/ui · ReactDisplays a message in a conversation, with optional avatar, header, footer, and alignment.
Merging BubblesCult UI · ReactMerging bubbles visualization
Bubble variants in a release threadReUI · ReactAll seven variants doing the job each one is for, in one deploy thread.
Chat Editable MessageLobe UI · React
AI SendKokonut UI · ReactAn email the assistant drafted, editable in place. Send starts a short countdown you can undo before anything goes out.
Message BubblebeUI · ReactSupplies the visual surface inside the row.
Message ScrollerPanel UI · React NativeScroll behaviour a chat transcript needs.
ResponseAI Elements (Svelte) · SvelteA markdown response renderer for streamed AI content.
ChatGPT MessageNotra · ReactUser bubbles and bubble-less assistant turns with reasoning and hover actions.
Text ResponseAI CSS · React
MarkerHextaUI · ReactQuiet notes between content, like date dividers and system events, with sticky dates and times that read as Today or…
In-Message ErrorLocalMode · ReactAn accessible per-message error/retry block rendered inline on a failed assistant message (not a global toast), with…
MessageCojeev UI · ReactStructures a conversational or activity entry with a main content area and supporting description.
Handoff PatternHalaska UI · React
Aria MessageReScript shadcn · ReScript
MessageD2Studio UI · ReactA chat message row: avatar, author, timestamp and content.
Streaming ResponseEaseUI · ReactWraps a response with the actions people expect once it settles: copy, replay, share, a thumbs up or down, and a list…
Speech BubbleCult UI · ReactSpeech bubble component
Grouped consecutive messagesReUI · ReactConsecutive turns from one sender collapse into a single BubbleGroup.
Chat Editable Message ListLobe UI · React
Streaming ResponsebeUI · ReactProvides the active and completed response lifecycle.
Web MessagePanel UI · React Native
Claude Code MessageNotra · ReactUser turns on a full-width bar and assistant turns behind a white bullet, with inline code and bold.
MessageHextaUI · ReactA chat message row with an avatar, name, bubbles and status, where new messages rise in from the sender's side.
MessageLocalMode · ReactRole-aware chat message (data-role) rendering string or ContentPart[] — markdown text, image thumbnails with a…
Message Thread PatternHalaska UI · React
Base BubbleReScript shadcn · ReScript
Message ScrollerD2Studio UI · ReactA chat transcript scroller that sticks to the newest message and offers a jump-to-latest button.
Message reactions and a reaction buttonReUI · ReactA static emoji row, a pressable reaction with a count, and a top anchored row.
Chat Message ModalLobe UI · React
Message ContextbeUI · React
Claude MessageNotra · ReactUser bubbles and serif assistant replies with slots for search, sources and actions.
Message scrollerHextaUI · ReactA chat scroll area that follows new messages, keeps your place while you read back, and counts what you missed on the…
ResponseLocalMode · ReactStreaming markdown renderer for assistant output: shows a cursor while streaming, tolerates partial/unterminated…
Streaming Answer PatternHalaska UI · React
Base MessageReScript shadcn · ReScript
Long reply with show moreReUI · ReactA long assistant answer folds to its first paragraph behind a Collapsible.
Codex MessageNotra · ReactUser turns on a full-width band and assistant turns behind a dim bullet.
Structured Output ViewerLocalMode · ReactA result panel for useGenerateObject extending Response: pretty-printed JSON, an independently-usable inference-stats…
Quick reply bubbles and an action rowReUI · ReactTinted bubbles that are real buttons and a link, plus an action row after the pick.
Gemini MessageNotra · ReactGemini's user pill and bubble-less assistant turn.
Assistant answer with formatted contentReUI · ReactA ghost bubble carrying a heading, a list, emphasis and inline code.
OpenCode MessageNotra · ReactUser prompts on a blue-ruled panel and indented assistant replies with OpenCode's markdown colors.
Two-sided conversationReUI · ReactIncoming and outgoing rows separated by nothing but the align prop.
Perplexity MessageNotra · ReactUser pill and assistant answer turn with search and action slots.
Avatars on both sidesReUI · ReactBottom-anchored avatars that flip with the row, plus a presence dot.
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.
Chat transcript with jump to latestReUI · ReactA scroll region that opens at the live edge with a jump to latest control.
Streaming reply that follows the edgeReUI · ReactautoScroll pins the viewport while tokens arrive, and releases the moment the reader scrolls up.
Anchored turn with a previous peekReUI · ReactscrollAnchor lifts a sent message near the top while a slice of the previous turn stays visible.
Opening position for a saved threadReUI · ReactCompare start, end and last-anchor as the place a reopened thread opens at.
Load earlier without losing your placeReUI · ReactOlder turns prepend above the reader while the row they were reading stays put.
Thread navigator for stepping turnsReUI · ReactA footer navigator that reports the turn you are reading and jumps between turns.