Shadcn Bubble

Q: How do I put sent messages on the right and received on the left?

Set `align` to end on the sender's bubbles and leave the rest on the default start. The prop resolves to align-self, so the wrapper has to be a flex column, and a grid or block wrapper drops the right hand side without an error. Carry the sender in the variant as well, so the side is not the only signal.

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.

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

When to use

Chat and support threads where each turn shows its sender by side and by color
Assistant replies in a transcript, including long answers folded to a lead and formatted answers
Turn extras such as emoji reactions and quick reply choices that the reader presses

When not to use

A turn that needs an avatar, a sender name, a timestamp or actions around it: use the Message component
A finished assistant page or panel with a composer and streaming replies wired: use the AI Chat blocks
A conversation with nothing in it yet, waiting for its first turn: use the Empty component

Agent notes

align end sets align-self, so each Bubble needs a flex column parent; in a grid or a plain block the end turns stay at the start
A pressable bubble is BubbleContent itself, through render on base or asChild on radix; the bubble hover and focus ring skip a control nested inside it

Markdownhttps://web.dev.reui.io/components/bubble.md

MCPget_component("bubble")

Installnpx shadcn@latest add bubble

Full index for agents:llms.txtReUI MCP setup

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.

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 13 production ready ai chat blocks in ReUI Pro, complete sections built on the same primitives and ready to copy into your app.

AI Chat (13 blocks)Conversation surfaces for AI products, from full chat shells to embeddable threads, sheets, and launchers.

Browse all AI & Agents blocks

Frequently Asked Questions

What is a Shadcn Bubble used for in real products?

AI assistant transcripts, support and sales inboxes, in app chat, comment threads, and any log of turns where the sender matters. Anywhere a message needs a side, a color, and a body that wraps cleanly, a bubble is less work than a set of custom flex rules per sender.

How do I put sent messages on the right and received on the left?

Set align to end on the sender's bubbles and leave the rest on the default start. The prop resolves to align-self, so the wrapper has to be a flex column, and a grid or block wrapper drops the right hand side without an error. Carry the sender in the variant as well, so the side is not the only signal.

Which variant should I use for AI assistant replies?

Ghost. It is the only variant that clears the frame, the padding, and the 80% width cap, so a structured answer with a heading, a list, and inline code spans the row and reads as a document rather than as a chat quote. Keep user turns on default or tinted so the two sides stay distinguishable.

How do I group consecutive messages from the same sender?

Wrap those turns in a BubbleGroup. The group's internal gap is tighter than the thread gap, and that difference is what makes the lines read as one turn, so do not equalize the two. Keep align on each Bubble: the group stretches to the column and has no side of its own.

Can a bubble itself be a button or a link?

Yes, and that is how quick replies are built. The Base UI twin takes render with the label staying as BubbleContent's children, while the Radix twin takes asChild with the label nested inside the single child element. They are structurally different, so swapping only the prop name when porting leaves you with a button that has no accessible name.

How do reactions attach to a bubble?

Render BubbleReactions inside the Bubble and position it with side and align. It is absolutely positioned and translated most of the way outside the bubble edge, so a thread that carries reactions needs a larger gap than a plain one, or the pill lands on the next message. The row also drops its own padding as soon as it contains a button, so an interactive row should hold exactly one control and let that control supply the hit area.

Does Shadcn Bubble add dependencies or lock my styling?

The registry item is a single file and lists no other registry components, so installing bubble does not pull a chat framework behind it. Styling comes from the active Shadcn Create style, which sets radius, padding, and text size together on the content element. Because those rules load in the base layer, any utility you add on BubbleContent wins for every theme at once, so use one when you mean to override all 8 and leave the ladder alone when you do not.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.