Message

One turn in a conversation — avatar, header, content, and footer, aligned to a side of the thread.

Lena · 2:14 PM

Did you see the new studio panel?

The drill-in feels really smooth.

Shipping it this week 🚀

Seen · 2:16 PM

<div className="flex w-full max-w-sm flex-col gap-4">
  <Message>
    <MessageAvatar>
      <Avatar size="sm">
        <AvatarFallback>LN</AvatarFallback>
      </Avatar>
    </MessageAvatar>
    <MessageContent>
      <MessageHeader>Lena · 2:14 PM</MessageHeader>
      <BubbleGroup>
        <Bubble variant="muted">
          <BubbleContent>Did you see the new studio panel?</BubbleContent>
        </Bubble>
        <Bubble variant="muted">
          <BubbleContent>The drill-in feels really smooth.</BubbleContent>
        </Bubble>
      </BubbleGroup>
    </MessageContent>
  </Message>
  <Message align="end">
    <MessageContent>
      <Bubble align="end">
        <BubbleContent>Shipping it this week 🚀</BubbleContent>
      </Bubble>
      <MessageFooter>Seen · 2:16 PM</MessageFooter>
    </MessageContent>
  </Message>
</div>

Installation

npm

pnpm

yarn

bun

npx shadcn@latest add @dotui/message

Usage

import { Message, MessageContent } from "@/ui/message"

<Message align="end">
  <MessageContent>{/* bubbles, text, rich content */}</MessageContent>
</Message>

Anatomy

Message lays out one turn: align picks the side of the thread and flips the row, so the MessageAvatar sits on the sender's side. MessageContent is the content column — put a Bubble inside for contained messages, or plain content for full-width assistant replies. MessageHeader and MessageFooter carry metadata like the sender name, timestamp, or delivery status, and consecutive messages from one sender stack in a MessageGroup.

import {
  Message,
  MessageAvatar,
  MessageContent,
  MessageFooter,
  MessageHeader,
} from "@/ui/message"

<Message>
  <MessageAvatar>{/* <Avatar /> */}</MessageAvatar>
  <MessageContent>
    <MessageHeader>Lena · 2:14 PM</MessageHeader>
    {/* content */}
    <MessageFooter>Seen</MessageFooter>
  </MessageContent>
</Message>

Examples

Basic

How do I center a div?

Grid on the parent, place-items center.

Group

Three messages,

one sender,

one tight stack.

API Reference

MessageGroup

A group of consecutive messages from the same sender.

Supports all div attributes.

Prop	Type	Default

Message

One turn in a conversation — lays out the avatar and the content column on one side of the thread.

Supports all div attributes.

Prop	Type	Default

MessageAvatar

The sender's avatar — a circular wrapper for an image, initials, or icon. Anchors to the bottom of the message.

Supports all div attributes.

Prop	Type	Default

MessageContent

The message's content column — bubbles, text, or any rich content.

Supports all div attributes.

Prop	Type	Default

MessageHeader

Metadata above the content — sender name, timestamp.

Supports all div attributes.

Prop	Type	Default

MessageFooter

Metadata below the content — delivery status, reactions summary.

Supports all div attributes.

Prop	Type	Default

Last updated on 8/31/2026