# Shadcn Reactions

> Message reactions and a reaction button

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

## Best for

Emoji pills hanging off the bubble edge on a Card, static rows labeled as one image and a single aria-pressed toggle

## Agent notes

- `reacted` is local state and `cheers` derives 3 or 4 from it; wire the toggle to your stored reaction count and save call
- Keep the thread gap near `gap-8`, since `BubbleReactions` sits 3/4 of its height outside the bubble and would cover the next turn
- Keep the thread on a `Card`: the reactions ring is drawn in the card color and reads as a halo on the page background in dark mode

## Install

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

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