# Shadcn Formatted Answer

> Assistant answer with formatted content

- Type: example, free and open source (MIT)
- Component: [Bubble](https://web.dev.reui.io/components/bubble.md)
- Page: https://web.dev.reui.io/components/bubble/c-bubble-7
- 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_example("c-bubble-7")`
- Registry item: https://web.dev.reui.io/r/styles/base-nova/c-bubble-7.json
- Uses: Bubble

## Best for

A wide column where the answer spans the row as real elements, with no markdown parser and no raw HTML

## Agent notes

- The answer is hardcoded JSX inside `BubbleContent`; map model output onto the same elements, or a markdown renderer that never sets raw HTML

## When not to use

- A long answer that should fold to its first paragraph until asked: use [Show More](https://web.dev.reui.io/components/bubble/c-bubble-5.md) (`get_example("c-bubble-5")`)

## Install

```bash
npx shadcn@latest add @reui/c-bubble-7
```

## About Shadcn Bubble

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

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.