# Shadcn Message

> Open-source shadcn message components for chat transcripts, assistant replies, and support threads.

- Type: shadcn/ui component, free
- Page: https://web.dev.reui.io/components/message
- 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_component("message")`, then `get_examples("message")`
- Examples: 7

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

## Examples

- [Two-Sided Chat](https://web.dev.reui.io/components/message/c-message-1.md): Two-sided conversation. Best for the bare pattern with no avatars or metadata, where a muted or default bubble repeats which side spoke.
- [Avatars](https://web.dev.reui.io/components/message/c-message-2.md): Avatars on both sides. Best for photo avatars for both people, a green presence badge with a screen reader Online label and a long turn that wraps.
- [Sender & Status](https://web.dev.reui.io/components/message/c-message-3.md): Sender name and delivery status. Best for a name and time header split by a decorative dot, a Read receipt under the outgoing turn and an Edited footer.
- [Reply Actions](https://web.dev.reui.io/components/message/c-message-4.md): Reply actions in the footer. Best for regenerate cycling 2 stored drafts and clearing the vote, a Copy that flips to a check, and pressed thumb toggles.
- [Shared Files](https://web.dev.reui.io/components/message/c-message-5.md): Files shared in a thread. Best for an outgoing image tile above its caption and an incoming CSV card under its text, with a named download button.
- [Consecutive Messages](https://web.dev.reui.io/components/message/c-message-6.md): Consecutive messages from one sender. Best for the name on the first row and the portrait on the last, with empty avatar slots holding the run on one spine.
- [Streaming Reply](https://web.dev.reui.io/components/message/c-message-7.md): Streaming reply with a pending state. 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.

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.