Dev Design LibraryTailwind CSS Chat Message Components
Dev Design Library indexes 76 Tailwind CSS chat message components from 29 open-source UI libraries, with the most coming from ReUI, Notra, LocalMode, beUI and HextaUI. 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. 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…
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
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.
BubbleSpaceUI · ReactRenders floating animated bubbles across the background that smoothly move and drift away when users move their mouse.
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.
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.
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.
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.
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 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.
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…
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.