Incoming and outgoing rows separated by nothing but the align prop.
For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.
Best for: The bare pattern with no avatars or metadata, where a muted or default bubble repeats which side spoke
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
- Several turns in a row from one person that should share one avatar: use the Consecutive Messages example
- A text surface on its own, with no avatar slot, metadata row or side switching: use the Bubble component
- A long thread that scrolls and must stay pinned to the newest turn: use the Message Scroller component
- A complete assistant screen with a composer, a thread switcher and streaming controls: use the AI Chat blocks
Agent notes
- On an
alignend row only children ofMessageContentthat carry adata-slotmove to the end; a plain element there keeps to the start MessageHeaderandMessageFooterset no gap, so a header or footer built from several nodes needs its own gap class
https://web.dev.reui.io/components/message/c-message-1.mdget_example("c-message-1")npx shadcn@latest add @reui/c-message-1About Shadcn Message Two-Sided Chat
Two-sided conversation. Built by composing Bubble, Message. A free, open source shadcn message example you can install with npx shadcn@latest add @reui/c-message-1 and edit as your own code.
What You Can Build With Shadcn Message Two-Sided Chat
- Composes Bubble, Message, so it drops into any project already using those components.
- Install it with the shadcn CLI: npx shadcn@latest add @reui/c-message-1
- Open source and free, with the full source on this page to copy or adapt.
More Shadcn Message Examples
- Avatars Avatars on both sides
- Sender & Status Sender name and delivery status
- Reply Actions Reply actions in the footer
- Shared Files Files shared in a thread
- Consecutive Messages Consecutive messages from one sender
- Streaming Reply Streaming reply with a pending state
Related Shadcn Component Categories
Open-source shadcn message scroller components for chat transcripts, streaming replies, and jump-to-latest scrolling.
Open-source shadcn native select components for lightweight selects, mobile-friendly forms, and basic option picking.
Open-source shadcn navigation menu components for site navigation, mega menus, and product navigation.
Open-source shadcn number field components for quantity pickers, pricing inputs, and step controls.
Open-source shadcn pagination components for table pagination, search results, and content archives.
Open-source shadcn phone input components for international signup, contact forms, and country codes.
Frequently Asked Questions
When should I use Shadcn Message Two-Sided Chat?
Use it for the bare pattern with no avatars or metadata, where a muted or default bubble repeats which side spoke.
Shadcn Message as a whole fits:
- 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
For several turns in a row from one person that should share one avatar, use the Consecutive Messages example. For a text surface on its own, with no avatar slot, metadata row or side switching, use the Bubble component. For a long thread that scrolls and must stay pinned to the newest turn, use the Message Scroller component. For a complete assistant screen with a composer, a thread switcher and streaming controls, use the AI Chat blocks.
How do I install Shadcn Message Two-Sided Chat?
Is Shadcn Message Two-Sided Chat free to use?
Which components does Shadcn Message Two-Sided Chat use?
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
From $249, once. Lifetime updates.