Skip to content

Message

One turn in a conversation: an avatar, the sender and time, the bubbles, and a status line. The user's own messages align to the end.

Sourcecomponents/message.tsx
Assistant · 9:40
Your pricing page is ready. Want a second version with an annual toggle?
Ada · 9:41
Pick a reply above.
Thumbs up: 1
Delivered

Usage

Message usage
import { Avatar } from "@/components/avatar";import { Bubble, BubbleContent } from "@/components/bubble";import { Message, MessageAvatar, MessageContent, MessageFooter, MessageHeader } from "@/components/message";
export function MessageUsage() {  return (    <Message align="end">      <MessageAvatar>        <Avatar alt="Ada" />      </MessageAvatar>      <MessageContent>        <MessageHeader>Ada · 9:41</MessageHeader>        <Bubble align="end">          <BubbleContent>See you then.</BubbleContent>        </Bubble>        <MessageFooter>Read</MessageFooter>      </MessageContent>    </Message>  );}

When to use

Use when

One turn in a chat with an agent or a person: avatar, sender and time, bubbles, a status line. align="end" for the user's own messages

Don’t use when

Notifications or comments outside a conversation (use Item or Card)