3

Message

Composable layout for a chat message row: an avatar, an optional header/footer (name, timestamp), and Bubble content.

Last updated August 8, 2026

CreditsUnchangedPublished

Copied from shadcn/ui.

Overview

AI
Assistant · 09:41
How can I help you today?
I need help with my order.
Seen · 09:42
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Bubble, BubbleContent } from "@/components/ui/bubble"
import {
  Message,
  MessageAvatar,
  MessageContent,
  MessageFooter,
  MessageGroup,
  MessageHeader,
} from "@/components/ui/message"
 
export function MessageDemoExample() {
  return (
    <MessageGroup className="w-full max-w-sm">
      <Message align="start">
        <MessageAvatar>
          <Avatar>
            <AvatarFallback>AI</AvatarFallback>
          </Avatar>
        </MessageAvatar>
        <MessageContent>
          <MessageHeader>Assistant · 09:41</MessageHeader>
          <Bubble variant="muted">
            <BubbleContent>How can I help you today?</BubbleContent>
          </Bubble>
        </MessageContent>
      </Message>
      <Message align="end">
        <MessageContent>
          <Bubble align="end">
            <BubbleContent>I need help with my order.</BubbleContent>
          </Bubble>
          <MessageFooter>Seen · 09:42</MessageFooter>
        </MessageContent>
      </Message>
    </MessageGroup>
  )
}

Installation

$ npx shadcn@latest add https://ui.persian-labs.ir/r/message.json

Usage

import {
  Message,
  MessageAvatar,
  MessageContent,
  MessageGroup,
  MessageHeader,
} from "@/components/ui/message"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Bubble, BubbleContent } from "@/components/ui/bubble"
 
export function Example() {
  return (
    <MessageGroup>
      <Message align="start">
        <MessageAvatar>
          <Avatar>
            <AvatarFallback>AI</AvatarFallback>
          </Avatar>
        </MessageAvatar>
        <MessageContent>
          <MessageHeader>Assistant</MessageHeader>
          <Bubble variant="muted">
            <BubbleContent>How can I help you today?</BubbleContent>
          </Bubble>
        </MessageContent>
      </Message>
    </MessageGroup>
  )
}

RTL

align uses flex-row-reverse rather than a physical side, so it already reads correctly under RTL.

هو
هوش مصنوعی · ۰۹:۴۱
چطور می‌تونم کمکتون کنم؟
در مورد سفارشم سوال دارم.
مشاهده شد · ۰۹:۴۲
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Bubble, BubbleContent } from "@/components/ui/bubble"
import {
  Message,
  MessageAvatar,
  MessageContent,
  MessageFooter,
  MessageGroup,
  MessageHeader,
} from "@/components/ui/message"
 
export function MessageRtlExample() {
  return (
    <MessageGroup className="w-full max-w-sm">
      <Message align="start">
        <MessageAvatar>
          <Avatar>
            <AvatarFallback>هو</AvatarFallback>
          </Avatar>
        </MessageAvatar>
        <MessageContent>
          <MessageHeader>هوش مصنوعی · ۰۹:۴۱</MessageHeader>
          <Bubble variant="muted">
            <BubbleContent>چطور می‌تونم کمکتون کنم؟</BubbleContent>
          </Bubble>
        </MessageContent>
      </Message>
      <Message align="end">
        <MessageContent>
          <Bubble align="end">
            <BubbleContent>در مورد سفارشم سوال دارم.</BubbleContent>
          </Bubble>
          <MessageFooter>مشاهده شد · ۰۹:۴۲</MessageFooter>
        </MessageContent>
      </Message>
    </MessageGroup>
  )
}

API Reference

Message

Edit this page on GitHub
PreviousMenubarNextMessage Scroller