# Shadcn Bubble

> Open-source shadcn bubble components for chat threads, assistant replies, and message reactions.

- Type: shadcn/ui component, free
- Page: https://web.dev.reui.io/components/bubble
- Docs (Base UI): https://ui.shadcn.com/docs/components/base/bubble.md
- Docs (Radix UI): https://ui.shadcn.com/docs/components/radix/bubble.md
- MCP: `get_component("bubble")`, then `get_examples("bubble")`
- Examples: 7

## 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 [Message](https://web.dev.reui.io/components/message.md) (`get_component("message")`)
- A finished assistant page or panel with a composer and streaming replies wired: use the [AI Chat blocks](https://web.dev.reui.io/blocks/ai-agents/ai-chat.md)
- A conversation with nothing in it yet, waiting for its first turn: use [Empty](https://web.dev.reui.io/components/empty.md) (`get_component("empty")`)

## 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

## Examples

- [Sender Alignment](https://web.dev.reui.io/components/bubble/c-bubble-1.md): Support thread with sender alignment. Best for a Card with an avatar and name header over a thread mapped from data, each turn announcing its sender to screen readers.
- [All Variants](https://web.dev.reui.io/components/bubble/c-bubble-2.md): Bubble variants in a release thread. Best for one turn per variant, from a secondary status update and a destructive failure notice to the full width ghost answer.
- [Grouped Messages](https://web.dev.reui.io/components/bubble/c-bubble-3.md): Grouped consecutive messages. Best for sender entries holding an array of lines, a wider thread gap than group gap, and a delivered time under the last turn.
- [Reactions](https://web.dev.reui.io/components/bubble/c-bubble-4.md): Message reactions and a reaction button. Best for emoji pills hanging off the bubble edge on a Card, static rows labeled as one image and a single aria-pressed toggle.
- [Show More](https://web.dev.reui.io/components/bubble/c-bubble-5.md): Long reply with show more. Best for a lead paragraph kept out of the panel so nothing repeats, with a link Button trigger whose chevron turns on open.
- [Quick Replies](https://web.dev.reui.io/components/bubble/c-bubble-6.md): Quick reply bubbles and an action row. Best for choices that swap for the echoed pick and a reply written for that option, with one choice leaving as a link.
- [Formatted Answer](https://web.dev.reui.io/components/bubble/c-bubble-7.md): Assistant answer with formatted content. Best for a wide column where the answer spans the row as real elements, with no markdown parser and no raw HTML.

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.