Header for identity, footer for status, and how each one picks its side.
For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.
Best for: A name and time header split by a decorative dot, a Read receipt under the outgoing turn and an Edited footer
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 footer holding icon buttons that act on the reply: use the Message Reply Actions 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
- Each time and the Read receipt in
MessageHeaderandMessageFooterare hardcoded strings; render them from your message timestamps - On an
alignend rowMessageHeadermoves to the end with the bubble; the demo only puts headers on start rows - 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-3.mdget_example("c-message-3")npx shadcn@latest add @reui/c-message-3About Shadcn Message Sender & Status
Sender name and delivery status. Built by composing Bubble, Message. A free, open source shadcn message example you can install with npx shadcn@latest add @reui/c-message-3 and edit as your own code.
What You Can Build With Shadcn Message Sender & Status
- 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-3
- Open source and free, with the full source on this page to copy or adapt.
More Shadcn Message Examples
- Two-Sided Chat Two-sided conversation
- Avatars Avatars on both sides
- 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 Sender & Status?
Use it for a name and time header split by a decorative dot, a Read receipt under the outgoing turn and an Edited footer.
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 a footer holding icon buttons that act on the reply, use the Message Reply Actions 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 Sender & Status?
Is Shadcn Message Sender & Status free to use?
Which components does Shadcn Message Sender & Status 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.