Shadcn Message

What is Shadcn Message?

In UI terms, a message is one turn in a conversation: who said it, what they said, and the metadata around it. Shadcn Message splits that into an avatar slot and a content column, with optional header and footer rows inside the column. Every part is a div with a data-slot and no behavior of its own, and the file is identical in the Base UI and Radix builds, so a transcript ports between the two twins without a rewrite.

The 7 components here show a two-sided conversation, avatars that stay level with the last line of a long message, a sender name paired with a read receipt, a copy and regenerate toolbar under an assistant answer, image and document attachments inside a thread, a run of messages stacked under one avatar, and a reply that moves from pending to streaming to settled. They answer the layout questions before you wire a transport: which side a turn sits on, where the timestamp goes, and what 3 messages in a row from one person should look like.

Why Use Shadcn Message?

Transcript layout is fiddly in ways that surface late. The avatar drifts to the top of a three-line message, the timestamp lands a few pixels off the text above it, the outgoing side grows its own margin rules, and a run of 5 messages from one person repeats the same portrait 5 times. Message keeps those decisions in CSS, keyed off the row, so your code holds content instead of spacing.

A row is the start of a chat surface, not the end of one. When the thread needs a composer, a scroll container that keeps up with new turns, saved conversations, and streaming controls, the 12 AI Chat blocks in ReUI Pro assemble that surface, and 9 of them import this same component. Nothing you learn on this page is thrown away when you move up.

Shadcn Message Features

• Side Switching With One Prop. Set align to 'end' on the row. It writes data-align, reverses the flex direction, and the per-style rule pulls every direct child of MessageContent that carries a data-slot to the end, so the outgoing turn needs no alignment classes.
• Bottom-Anchored Avatar. MessageAvatar aligns to the end of the row, so the portrait stays level with the last line of a multi-line message instead of floating beside the first. It keeps a minimum width from the active style, so an empty one still holds the column open as a spacer.
• Header and Footer Slots. MessageHeader carries the sender name and time, MessageFooter carries delivery state or reply actions. Both render in small muted text and are padded to line up with the message surface above them, and the footer follows whichever side the row is on.
• Message Grouping. MessageGroup stacks consecutive messages from one sender with its own gap, tighter than the gap you set between senders. Render the avatar on the last row of the run and leave MessageAvatar empty on the others so the whole run sits on one spine.
• Unframed Assistant Rows. A ghost Shadcn Bubble drops the frame, the background, and the content padding, and the header and footer drop their matching padding with it. That is the full-width layout most AI answers use, and it sits in the same row component as a framed reply.
• Composition Over Configuration. MessageContent takes whatever you put in it: a bubble, a Shadcn Attachment card, a Shadcn Marker status line, or your own renderer. Because the parts are wrappers rather than a widget, a transcript stays yours to restructure.
• Shadcn Create Compatible. All 8 Shadcn Create styles (Nova, Vega, Maia, Lyra, Mira, Luma, Sera, and Rhea) set the row gap, the text size, and the avatar width for Message, so previews and exported code follow the same tokens as the rest of your UI.

Composing Message With Bubble, Attachment, and Marker

Message is the frame, and the content comes from its siblings. Shadcn Bubble is the surface the text sits on and ships 7 variants, from a plain default to the unframed ghost used for assistant answers. Shadcn Attachment is a file card with its own border and per-style radius, so a shared image or CSV drops into the content column with no container to hand-roll. Shadcn Marker is the one-line status row for a pending answer, usually paired with Shadcn Spinner. All of them sit inside MessageContent, and the row aligns them together.

Around the row, Shadcn Avatar supplies the portrait and a presence badge, Shadcn Button supplies the copy, regenerate, and rating actions in the footer, and Shadcn Message Scroller supplies the scrolling viewport with a jump-to-latest control for threads longer than the screen. A Shadcn Textarea composer below the list completes the surface.