Bubble for React

One line of a conversation, in a colored box. It can sit to one side and take a reaction.

Use it when the view is just the thread, not a card around each line. When a line also needs an avatar or a time, use a Message. In React, Base UI has a frameless option so a long reply can use the full width.

Installation

Anatomy

Bubble
├── BubbleContent
└── BubbleReactions

BubbleGroup
├── Bubble
│   └── BubbleContent
└── Bubble
    └── BubbleContent

Usage

import {
  Bubble, BubbleContent, BubbleReactions,
} from "@/components/ui/bubble";

<Bubble className="max-w-full min-w-0">
  <BubbleContent>
    I checked the registry output and removed the stale route.
  </BubbleContent>
  <BubbleReactions>
    <span>👍</span>
  </BubbleReactions>
</Bubble>

Demos

Variants

Every variant in one column: default, secondary, muted, tinted, outline, destructive, and ghost. A common split is tinted or default for the person's own messages and muted for the other side. Destructive is for a failure, and ghost drops the frame and the width cap so a long assistant reply can use the row. Pick the color for who is speaking, not as decoration.

Alignment

align defaults to start, the other person's side. end is the reader's own messages, and it follows writing direction, so a right-to-left layout still puts them on the correct side. Set it on each bubble. If the row also has an avatar and a timestamp, set the alignment on Message and let the bubble follow that.

Group

Consecutive messages from one person should not look like separate turns. BubbleGroup tightens the gap between them. Keep align on each bubble, not on the group, and start a new group when the sender changes. A reaction on the last bubble can use align start so it sits toward the thread instead of hanging off the outer corner.

Links and Buttons

Suggested replies can be the bubble itself. BubbleContent merges onto a button, so the whole colored box is the control and pressing it sends that text. How you merge the element depends on the base, and the clickable-bubble question in the FAQ names the prop. Stack the choices in BubbleGroup when they are a few answers under a prompt, not a link inside a sentence.

Reactions

BubbleReactions overlaps the edge of the bubble, on the bottom by default. Emoji can sit there, including a count when the list is long, and side top moves them above the text when the next message is close. The slot is not only emoji: a destructive bubble can hold a confirm button. Leave a gap so the next bubble does not cover the overlap.

Collapsible

A long note should not take over the thread. The bubble shows the first stretch of the text, then a show-more control inside a Collapsible reveals the rest, and show-less puts it back. Use this for a review, a log, or an assistant reply that runs long. Short chat stays visible, and the control lives in the bubble so you do not grow a second panel.

Tooltip

A read receipt is not part of the sentence. The check icon sits in BubbleReactions, and a Tooltip on that icon carries the time. Use this for a timestamp, a delivery state, or any one-line fact that would clutter the message. The tooltip leaves when focus does, so if the detail is several lines, put a popover in that same slot instead.

Popover

A failed command needs the error, but that text is not the line people should read first. The bubble says it failed, and an info button in BubbleReactions opens a Popover with the exit code and the missing file. Use this when the extra text is more than a tooltip and less than a dialog. That slot is already on the failed bubble, so it is the anchor.

Markdown

Assistant text is often more than one sentence: emphasis, code, a second paragraph. variant ghost removes the frame and the width cap so that content can use the row, while the person's own short line stays a normal muted bubble. You render the markdown, and the bubble only supplies the container. Keep a frame when the text is a chat reply rather than a small document.

FAQ

API Reference