StorybookGitHub

Message

Layout primitives for chat rows with avatars, headers, and footers.

AI
Assistant
How can I help you today?
Just now
You
You
Summarize the design review notes.
Just now

Installation

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

Usage

Compose chat threads with MessageGroup and Message. Pair with Bubble for message surfaces and Avatar inside MessageAvatar.

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

export function Example() {
  return (
    <MessageGroup>
      <Message align="start">
        <MessageAvatar>
          <Avatar size="sm">
            <AvatarFallback>AI</AvatarFallback>
          </Avatar>
        </MessageAvatar>
        <MessageContent>
          <MessageHeader>Assistant</MessageHeader>
          <Bubble variant="muted">
            <BubbleContent>How can I help?</BubbleContent>
          </Bubble>
          <MessageFooter>Just now</MessageFooter>
        </MessageContent>
      </Message>
    </MessageGroup>
  );
}

Use align="end" for outgoing messages (row reverses).