Message
A message component for chat and messaging UIs with avatar alignment.
When to use
Message composes one turn: avatar, content, and optional header and footer, aligned by author. Give the current user align="end" and everyone else align="start", and leave the surface styling to Bubble; when a turn carries no avatar or metadata, a Bubble on its own is enough.
Platform notes
This is layout plus two tokens: bg-muted behind the avatar and text-muted-foreground for header and footer text. Alignment is a data-align attribute that reverses the flex row and is read by children through group-data-[align=end]/message:, which is why the demo sets align on both Message and its Bubble; setting it in one place only half works. Author names, status labels and relative times go through react-i18next and are formatted for the active locale, while the message body is user data and must never be passed to the translator. Keep Message in shared/ui and put the mapping from your conversation model onto it in the slice that owns the conversation, exposed through that slice's index.ts.
Install
npx shadcn@latest add messageCode
"use client";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Bubble, BubbleContent } from "@/components/ui/bubble";
import { Message, MessageAvatar, MessageContent, MessageGroup } from "@/components/ui/message";
import { Bot } from "lucide-react";
export function MessageDemo() {
return (
<MessageGroup className="max-w-md">
<Message>
<MessageAvatar>
<Avatar>
<AvatarFallback>P</AvatarFallback>
</Avatar>
</MessageAvatar>
<MessageContent>
<Bubble variant="tinted">
<BubbleContent>How do I add the new shadcn components?</BubbleContent>
</Bubble>
</MessageContent>
</Message>
<Message align="end">
<MessageAvatar>
<Avatar>
<AvatarFallback>
<Bot />
</AvatarFallback>
</Avatar>
</MessageAvatar>
<MessageContent>
<Bubble variant="tinted" align="end">
<BubbleContent>
Just run <code>npx shadcn@latest add</code> with the component name. The docs use the
Platform theme automatically.
</BubbleContent>
</Bubble>
</MessageContent>
</Message>
</MessageGroup>
);
}