Message

Installation

Complete project setup first. Your configuration must select react/base and include your Design System ID.

pnpm exec frontfriend download message -f react --primitive base

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

import { Message, MessageContent } from "@/components/ui/message";
import { Bubble, BubbleContent } from "@/components/ui/bubble";
<div className="w-96">
  <Message align="start">
    <MessageContent>
      <Bubble>
        <BubbleContent>Your report is ready.</BubbleContent>
      </Bubble>
    </MessageContent>
  </Message>
</div>;

Examples

Default

import {
  Message,
  MessageAvatar,
  MessageContent,
  MessageFooter,
} from "@/components/ui/message";
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
import {
  Bubble,
  BubbleContent,
  BubbleGroup,
  BubbleReactions,
} from "@/components/ui/bubble";
import { Marker, MarkerContent } from "@/components/ui/marker";
const me = "https://github.com/shadcn.png";
const them = "https://github.com/vercel.png";
<div className="flex w-[380px] flex-col gap-6 py-12">
  <Message align="end">
    <MessageAvatar>
      <Avatar>
        <AvatarImage src={me} alt="@me" />
        <AvatarFallback>ME</AvatarFallback>
      </Avatar>
    </MessageAvatar>
    <MessageContent>
      <Bubble>
        <BubbleContent>Deploying to prod real quick.</BubbleContent>
      </Bubble>
    </MessageContent>
  </Message>
  <Message>
    <MessageAvatar>
      <Avatar>
        <AvatarImage src={them} alt="@rabbit" />
        <AvatarFallback>R</AvatarFallback>
      </Avatar>
    </MessageAvatar>
    <MessageContent>
      <Bubble variant="muted">
        <BubbleContent>It&apos;s 4:55 PM. On a Friday.</BubbleContent>
      </Bubble>
    </MessageContent>
  </Message>
  <Message align="end">
    <MessageAvatar>
      <Avatar>
        <AvatarImage src={me} alt="@me" />
        <AvatarFallback>ME</AvatarFallback>
      </Avatar>
    </MessageAvatar>
    <MessageContent>
      <Bubble>
        <BubbleContent>It&apos;s a one-line change.</BubbleContent>
      </Bubble>
      <MessageFooter>Delivered</MessageFooter>
    </MessageContent>
  </Message>
  <Message>
    <MessageAvatar>
      <Avatar>
        <AvatarImage src={them} alt="@rabbit" />
        <AvatarFallback>R</AvatarFallback>
      </Avatar>
    </MessageAvatar>
    <MessageContent>
      <BubbleGroup>
        <Bubble variant="muted">
          <BubbleContent>It&apos;s always a one-line change 😭.</BubbleContent>
        </Bubble>
        <Bubble variant="muted">
          <BubbleContent>Alright, let me take a look.</BubbleContent>
          <BubbleReactions role="img" aria-label="Reactions: thumbs up">
            <span>👍</span>
          </BubbleReactions>
        </Bubble>
      </BubbleGroup>
    </MessageContent>
  </Message>
  <Marker role="status">
    <MarkerContent>
      <span className="font-medium">Oliver</span> is typing...
    </MarkerContent>
  </Marker>
</div>;

With Header

import {
  Message,
  MessageAvatar,
  MessageContent,
  MessageHeader,
  MessageFooter,
} from "@/components/ui/message";
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
import { Bubble, BubbleContent } from "@/components/ui/bubble";
const them = "https://github.com/vercel.png";
<div className="flex w-[380px] flex-col gap-6 py-12">
  <Message>
    <MessageAvatar>
      <Avatar>
        <AvatarImage src={them} alt="@rabbit" />
        <AvatarFallback>R</AvatarFallback>
      </Avatar>
    </MessageAvatar>
    <MessageContent>
      <MessageHeader>evilrabbit · 4:55 PM</MessageHeader>
      <Bubble variant="muted">
        <BubbleContent>Shipping on a Friday again?</BubbleContent>
      </Bubble>
      <MessageFooter>Read</MessageFooter>
    </MessageContent>
  </Message>
</div>;

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Base UI.

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.