Message

import {
  Avatar,
  AvatarFallback,

The Message component lays out a single message in a conversation. It handles the avatar, alignment, header, and footer around the message surface.

For AI apps, you can render reasoning steps, tool calls and assistant messages using the Message component.

Installation#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add message
Copy

Usage#

Copyimport { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Bubble, BubbleContent } from "@/components/ui/bubble"
import { Message, MessageAvatar, MessageContent } from "@/components/ui/message"

Copy<Message>
  <MessageAvatar>
    <Avatar>
      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
      <AvatarFallback>CN</AvatarFallback>
    </Avatar>
  </MessageAvatar>
  <MessageContent>
    <Bubble>
      <BubbleContent>How can I help you today?</BubbleContent>
    </Bubble>
  </MessageContent>
</Message>

Note: Message owns the row layout—avatar, alignment, header, and footer. Render the visible message surface inside it with Bubble. For the scroll container around a conversation, use MessageScroller.

Composition#

Use the following composition to build a message:

CopyMessage
├── MessageAvatar
└── MessageContent
    ├── MessageHeader
    ├── Bubble
    └── MessageFooter

Use MessageGroup to stack consecutive messages from the same sender:

CopyMessageGroup
├── Message
└── Message

Features#

• Start and end alignment for sender and receiver rows via the align prop
• Avatar slot that anchors to the bottom of the message and stays clear of the footer
• Header and footer slots for sender names, status, and message actions
• Footer follows the message side; actions stay aligned on align="end" rows
• Group wrapper for stacking consecutive messages from the same sender
• Customizable styling through the className prop on every part

Examples#

Avatar#

Use MessageAvatar to render an avatar next to the message. Set align="end" on the message to align the avatar to the end of the message.

import {
  Avatar,
  AvatarFallback,

Group#

Use MessageGroup to stack consecutive messages from the same sender. Render an empty MessageAvatar on the earlier messages to keep them aligned with the avatar on the last one.

import {
  Avatar,
  AvatarFallback,

Header and Footer#

Use MessageHeader for a sender name and MessageFooter for metadata such as a delivery or read status.

import { Bubble, BubbleContent } from "@/components/ui/bubble"
import {
  Message,

Actions#

Place message-level actions in MessageFooter, such as copy, retry, or feedback buttons.

import {
  CopyIcon,
  RefreshCcwIcon,

Attachment#

Here's the image. Can you add it to the PDF? Use it for the cover page.

Done. Here's the PDF with the image added as the cover page.

sales-dashboard.pdfPDF · 2.4 MB

Thanks. Looks good.

Copy

"use client"

import { DownloadIcon, FileTextIcon } from "lucide-react"

View Code

Accessibility#

Message is a presentational layout wrapper. Accessibility comes from the content you place inside it.

Label icon-only actions#

Action buttons in MessageFooter are usually icon-only, so give each one an aria-label.

Copy<MessageFooter>
  <Button variant="ghost" size="icon" aria-label="Copy">
    <CopyIcon />
  </Button>
</MessageFooter>

Status updates#

For in-progress messages, use a Marker with role="status" so assistive tech announces the update as it appears.

Copy<Message>
  <Marker role="status">
    <MarkerIcon>
      <Spinner />
    </MarkerIcon>
    <MarkerContent>Checking the logs...</MarkerContent>
  </Marker>
</Message>

API Reference#

Message#

The message row wrapper.

MessageGroup#

Groups consecutive messages from the same sender.

MessageAvatar#

The avatar slot, aligned to the bottom of the message. When the message has a MessageFooter, the avatar shifts up to stay aligned with the message surface instead of the footer.

MessageContent#

Wraps the header, message surface, and footer.

MessageHeader#

Displays content above the message, such as a sender name. Stays aligned to the start regardless of align.

MessageFooter#

Displays content below the message, such as status or actions. Aligns to the message side.