Message

Chat message layout with avatar, content, header, and footer.

"use client";

import { Avatar, AvatarFallback } from "@/registry/base/ui/avatar";
import { Bubble, BubbleContent } from "@/registry/base/ui/bubble";
import {
  Message,
  MessageAvatar,
  MessageContent,
  MessageFooter,
  MessageGroup,
  MessageHeader,
} from "@/registry/base/ui/message";

export default function MessageDemo() {
  return (
    <div className="flex w-full max-w-md flex-col gap-4">
      <Message>
        <MessageAvatar>
          <Avatar className="size-8">
            <AvatarFallback>EC</AvatarFallback>
          </Avatar>
        </MessageAvatar>
        <MessageContent>
          <MessageHeader>Emma · 09:41</MessageHeader>
          <MessageGroup>
            <Bubble variant="muted">
              <BubbleContent>
                Hey! Did you get a chance to look at the new landing page?
              </BubbleContent>
            </Bubble>
            <Bubble variant="muted">
              <BubbleContent>No rush — just curious.</BubbleContent>
            </Bubble>
          </MessageGroup>
        </MessageContent>
      </Message>
      <Message align="end">
        <MessageContent>
          <Bubble align="end">
            <BubbleContent>
              Just did — the exposed grid looks great on mobile.
            </BubbleContent>
          </Bubble>
          <MessageFooter>Delivered</MessageFooter>
        </MessageContent>
      </Message>
    </div>
  );
}

Installation

npx shadcn@latest add https://sevenui.dev/r/message.json

Usage

import { Bubble, BubbleContent } from "@/components/ui/bubble";
import {
  Message,
  MessageAvatar,
  MessageContent,
  MessageHeader,
} from "@/components/ui/message";

export function IncomingMessage() {
  return (
    <Message>
      <MessageAvatar>{/* avatar */}</MessageAvatar>
      <MessageContent>
        <MessageHeader>Emma · 09:41</MessageHeader>
        <Bubble variant="muted">
          <BubbleContent>Hello!</BubbleContent>
        </Bubble>
      </MessageContent>
    </Message>
  );
}

Message owns the row layout — avatar, alignment, header, and footer — while the visible surface is rendered inside it, typically with Bubble. Wrap conversations in Message Scroller for scrolling. The avatar anchors to the bottom of the row and shifts up when a footer is present.

API reference

Message

Extends div. The row wrapper; align="end" reverses the row for outgoing messages and end-aligns the content’s children.

Prop	Type	Default
`align`	`"start" \| "end"`	`"start"`

MessageGroup, MessageAvatar, MessageContent, MessageHeader, MessageFooter

Structural wrappers extending div. MessageGroup stacks consecutive messages from one sender; MessageHeader and MessageFooter render muted meta rows above and below the surface.