Message

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

Emma · 09:41

Hey! Did you get a chance to look at the new landing page?

No rush — just curious.

Just did — the exposed grid looks great on mobile.

Delivered

TSX
"use client";

import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Bubble, BubbleContent } from "@/components/ui/bubble";
import {
  Message,
  MessageAvatar,
  MessageContent,
  MessageFooter,
  MessageGroup,
  MessageHeader,
} from "@/components/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

Bash
npx shadcn@latest add @sevenui/messagepnpm dlx shadcn@latest add @sevenui/messageyarn dlx shadcn@latest add @sevenui/messagebunx --bun shadcn@latest add @sevenui/message

Usage

TSX
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.