Message
A message with its sender, avatar and footer, holding one or more bubbles.
@cupertinoui/messageRegistry JSON 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"
// Messages with a sender, an avatar and a delivery status.
export default function MessageDemo() {
return (
<MessageGroup className="w-full max-w-sm">
<Message>
<MessageAvatar>
<Avatar className="size-8">
<AvatarFallback className="bg-linear-to-b from-[#fbc2eb] to-[#e0559b] text-[12px]">MA</AvatarFallback>
</Avatar>
</MessageAvatar>
<MessageContent>
<MessageHeader>Mia Appleseed</MessageHeader>
<Bubble variant="secondary">
<BubbleContent>Can you send me the slides from yesterday?</BubbleContent>
</Bubble>
</MessageContent>
</Message>
<Message align="end">
<MessageContent>
<Bubble>
<BubbleContent>Sure, here they are.</BubbleContent>
</Bubble>
<MessageFooter>Delivered</MessageFooter>
</MessageContent>
</Message>
</MessageGroup>
)
}Installation
pnpm dlx shadcn@latest add @cupertinoui/messageThe first install also adds the macOS theme. See Installation to set up the registry.
Usage
import { Message, MessageAvatar, MessageContent, MessageHeader } from "@/components/ui/message"
<Message>
<MessageAvatar>…</MessageAvatar>
<MessageContent>
<MessageHeader>Mia Appleseed</MessageHeader>
{/* Bubbles */}
</MessageContent>
</Message>API Reference
Every part forwards the props of the underlying element. The props below are the ones CupertinoUI adds or changes.
Message
| Prop | Type | Description |
|---|---|---|
align | "start" | "end"Default: "start" | Received on the left, sent on the right. |
className | string | Extra classes, merged with the component's own. |
MessageGroup / MessageAvatar / MessageContent / MessageHeader / MessageFooter
| Prop | Type | Description |
|---|---|---|
className | string | Extra classes, merged with the component's own. |