# Shadcn Sender Alignment

> Support thread with sender alignment

- 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-1
- 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-1")`
- Registry item: https://web.dev.reui.io/r/styles/base-nova/c-bubble-1.json
- Uses: Avatar, Bubble, Card

## Best for

A Card with an avatar and name header over a thread mapped from data, each turn announcing its sender to screen readers

## Agent notes

- Replace `thread` with your messages, and the hardcoded Lena in the screen reader prefix with the real sender name

## When not to use

- Several lines in a row from one person that should read as one turn: use [Grouped Messages](https://web.dev.reui.io/components/bubble/c-bubble-3.md) (`get_example("c-bubble-3")`)

## Install

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

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