Shadcn Bubble
Browse 7 production-ready shadcn bubble components for chat threads, AI assistant answers, grouped messages, quick replies, and emoji reactions. Shadcn Bubble is compatible with Radix UI and Base UI composition and is fully aligned with Shadcn Create style options, so the radius, padding, and text size in the previews match the code you ship.
Shadcn Bubble: Chat Threads, Assistant Replies, and Reactions
Shadcn Bubble is the message body of a conversation, split into 4 parts: BubbleGroup for consecutive turns from one sender, Bubble for the turn itself, BubbleContent for the text or markup, and BubbleReactions for an emoji row pinned to the bubble edge. It follows Radix UI and Base UI composition and reads its radius, padding, and text size from the active Shadcn Create style.
A bubble sizes to its content and caps at 80% of the thread width, and it takes its side from an align prop. A two sided transcript is therefore a map over your messages, not a set of hand written widths and margins.
ReUI shows bubbles inside real chat surfaces (a support thread, a release conversation, a folded assistant answer, a quick reply flow) beside Shadcn Avatar, Shadcn Card, and Shadcn Button, so you can judge density, grouping, and reaction placement in context. The sections below cover what the component is, why teams use it, which features matter, and how it fits a full chat surface.
What is Shadcn Bubble?
A bubble is the container around one message in a thread. Shadcn Bubble keeps that container dumb on purpose: Bubble carries the side and the color, BubbleContent carries the text, BubbleGroup tightens the gap between consecutive turns from one sender, and BubbleReactions hangs a reaction row off the bubble edge. There is no transcript state, no scroll logic, and no markdown parser inside it.
The 7 components here cover a two sided support thread, all 7 variants in one release conversation, grouped consecutive messages, reaction rows (static and pressable), a long assistant answer folded behind a Shadcn Collapsible, tinted quick replies that are real buttons and links, and a ghost assistant answer with a heading, a list, and inline code. They are there so you can settle bubble width, grouping gap, and reaction placement before you wire a transcript to a stream.
Why Use Shadcn Bubble?
Chat surfaces are usually the part of a product that gets hand rolled, and the things that go wrong are small and repetitive: the right hand side silently drops out because the wrapper is a grid rather than a flex column, consecutive messages read as separate turns, a reaction pill overlaps the next message, or one long URL pushes the whole thread sideways. Bubble answers each of those in a single file that pulls in no other registry components.
It is also the primitive the paid work is built on. 11 of the 12 AI Chat blocks import this same Bubble component, across 16 files, so the thread you assemble from the free components on this page is the thread that sits inside a streaming transcript with a composer, a model picker, citations, and code artifacts. Start here, and moving up to an assembled surface is a change of shell, not a rewrite of your message rendering.
Shadcn Bubble Features
- 7 Variants. default, secondary, muted, tinted, outline, ghost, and destructive sit on the Bubble root and paint the content child, so one prop covers a user turn, an agent turn, a quoted artifact, and a failure notice.
- Sender Alignment. align takes start or end and resolves to align-self, so the thread wrapper has to be a flex column. Pair the side with a variant, because a reader who cannot separate the two colors still has the alignment.
- Ghost for Assistant Prose. The ghost variant clears the background, the padding, and the 80% width cap, which is what lets a structured assistant answer use the full row while user turns stay inset.
- Grouped Turns. BubbleGroup is a flex column with a tighter internal gap than the thread. That gap difference is the whole grouping signal, so 3 lines from one sender read as one turn.
- Reaction Rows. BubbleReactions is absolutely positioned with side (top or bottom) and align (start or end), translated outside the bubble edge. It rings itself in the card color, so it reads cleanly when the thread sits on a Shadcn Card.
- Bubbles That Are Buttons. BubbleContent is polymorphic (render in the Base UI twin, asChild in the Radix twin), so a quick reply can be a real button or anchor. The hover and the focus ring ship with the variant, but only when the content element itself is the button or the link.
- Shadcn Create Compatible. All 8 Shadcn Create themes (Vega, Nova, Maia, Lyra, Mira, Luma, Sera, and Rhea) drive the bubble radius, padding, and text size together, so bubbles are square in Lyra and Sera and fully rounded in Luma, Maia, and Rhea without touching the component.
Building a Full Chat Surface
Bubble covers the message body and stops there, which keeps the rest of the surface yours to choose. Avatars, sender names, timestamps, and per turn actions belong to Shadcn Message, which has avatar, header, and footer slots and a grouping wrapper of its own. Scroll behavior and the jump to latest control belong to Shadcn Message Scroller, and file chips on a turn belong to Shadcn Attachment.
For the composer, put a Shadcn Textarea or a Shadcn Input Group under the thread with a send Shadcn Button, and keep the thread itself inside a Shadcn Card or a Shadcn Scroll Area so the reaction rings and the bubble edges have a surface to sit on. One rule is worth repeating: the per style sheet loads in the base layer, so a plain text-sm or rounded-lg on BubbleContent outranks it and pins one theme's value across all 8.
Integrating With Other Components
Put the thread inside a Shadcn Card with a Shadcn Avatar and a short status line in the header, which is also what keeps reaction rings reading correctly in dark mode. Add a Shadcn Button row under a turn for retry, copy, or insert actions, and a Shadcn Badge on the header for the model or the channel.
For longer answers, fold the remainder behind a Shadcn Collapsible rather than truncating a string, render code with Shadcn Code Block, and reserve a streaming turn with a Shadcn Skeleton. Pair the thread with Shadcn Message for avatars and timestamps, Shadcn Message Scroller for stick to bottom scrolling, and Shadcn Attachment for file chips.
When the surface has to become a product rather than a transcript, the 12 AI Chat blocks assemble these same parts into full pages, docked panels, and sheets, with streaming, thread switching, model pickers, citations, and composers already wired. All but 1 of those 12 import this Bubble component, so your message rendering carries over unchanged.
AI Chat Blocks in ReUI Pro
The free examples above pair with 12 production ready ai chat blocks in ReUI Pro, complete sections built on the same primitives and ready to copy into your app.
- AI Chat (12 blocks)Conversation surfaces for AI products, from full chat shells to embeddable threads, sheets, and launchers.
Frequently Asked Questions
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license.
From $249, once. Lifetime updates.