# Shadcn Streaming Reply

> Streaming reply with a pending state

- Type: example, free and open source (MIT)
- Component: [Message](https://web.dev.reui.io/components/message.md)
- Page: https://web.dev.reui.io/components/message/c-message-7
- Docs (Base UI): https://ui.shadcn.com/docs/components/base/message.md
- Docs (Radix UI): https://ui.shadcn.com/docs/components/radix/message.md
- MCP: `get_example("c-message-7")`
- Registry item: https://web.dev.reui.io/r/styles/base-nova/c-message-7.json
- Uses: Bubble, Button, Marker, Message, Spinner

## Best for

A spinner line, then text revealed 4 characters at a time behind a caret, and the full answer at once under reduced motion

## Agent notes

- The reveal is a timer over the fixed `ANSWER` string; set `revealed` or the text from your token stream
- Keep the `role` status span mounted in both states, since a live region inserted together with its text is not announced

## When not to use

- A settled answer that needs copy, regenerate and rating buttons under it: use [Reply Actions](https://web.dev.reui.io/components/message/c-message-4.md) (`get_example("c-message-4")`)
- A streaming reply in a long thread that has to keep the newest text in view: use [Message Scroller](https://web.dev.reui.io/components/message-scroller.md) (`get_component("message-scroller")`)

## Install

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

## About Shadcn Message

### When to use

- Chat, support and team threads laid out turn by turn, with avatars, sender names and read receipts
- Assistant replies carrying a copy, regenerate and rating toolbar, or a pending then streaming state
- Shared images and documents carried in a turn beside its text

### When not to use

- A text surface on its own, with no avatar slot, metadata row or side switching: use [Bubble](https://web.dev.reui.io/components/bubble.md) (`get_component("bubble")`)
- A long thread that scrolls and must stay pinned to the newest turn: use [Message Scroller](https://web.dev.reui.io/components/message-scroller.md) (`get_component("message-scroller")`)
- A complete assistant screen with a composer, a thread switcher and streaming controls: use the [AI Chat blocks](https://web.dev.reui.io/blocks/ai-agents/ai-chat.md)

### Agent notes

- On an `align` end row only children of `MessageContent` that carry a `data-slot` move to the end; a plain element there keeps to the start
- `MessageHeader` and `MessageFooter` set no gap, so a header or footer built from several nodes needs its own gap class

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.