Shadcn Message

A message is one row in a conversation: avatar, header, the surface, footer. align flips the whole row to the other side. Use it in a chat thread, a support inbox, or an AI assistant — wrap a Bubble or any other surface inside.

Usage

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

<Message>
  <MessageAvatar>
    <Avatar>
      <AvatarImage src="https://avatars.githubusercontent.com/u/223274014?s=200&v=4" alt="@shadcnio" />
      <AvatarFallback>SI</AvatarFallback>
    </Avatar>
  </MessageAvatar>
  <MessageContent>
    <Bubble>
      <BubbleContent>How can I help you today?</BubbleContent>
    </Bubble>
  </MessageContent>
</Message>

align="end" is the sent side. The visible surface lives inside MessageContent — usually a Bubble.

Composition

MessageGroup stacks consecutive messages from the same sender.

Avatar

align="end" puts the face on the right. Start is the received side.

Group

Consecutive sends from one person. An empty MessageAvatar on earlier rows keeps the bubbles in the same column.

Header and Footer

Header is the name. Footer is the timestamp or read receipt — it follows align.

Actions

Copy, retry, and feedback sit in MessageFooter. Name each icon button.

Attachment

Files live in MessageContent next to the Bubble — an image going out, a PDF coming back.

Markdown

Assistant text goes through Markdown. User messages stay plain.

API

MessageAvatar, MessageContent, MessageHeader, MessageFooter, and MessageGroup take className. A MessageFooter lifts the avatar so it stays on the surface, not the timestamp. The header stays start-aligned.

Notes

Icon-only footer buttons need an aria-label. Color is not the failed-send message — put that in the footer text.

With other components

Questions

Related