Message
One turn in a conversation: who said it, what was said, and a line under it.
Install
# once per project: where @zeroui items come frompnpm dlx shadcn@latest registry add @zeroui=https://zeroui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zeroui/messageExamples
Two turns
import { Avatar, AvatarFallback, AvatarImage } from "@/components/zero/avatar";import { Bubble, BubbleContent } from "@/components/zero/bubble";import { Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader,} from "@/components/zero/message";export default function MessageTurns() { return ( <MessageGroup className="w-full max-w-md"> <Message> <MessageAvatar> <Avatar size="sm"> <AvatarImage src="/samples/portrait-a.svg" alt="" /> <AvatarFallback>MK</AvatarFallback> </Avatar> </MessageAvatar> <MessageContent> <MessageHeader> <strong>Mara</strong> 21:04 </MessageHeader> <Bubble variant="secondary"> <BubbleContent>Gate 4 is shut. Taking the canal.</BubbleContent> </Bubble> </MessageContent> </Message> <Message align="end"> <MessageContent> <Bubble> <BubbleContent>Copy. Sign for it at the north gate.</BubbleContent> </Bubble> <MessageFooter>Read 21:05</MessageFooter> </MessageContent> </Message> </MessageGroup> );}Behaviour
The header names the speaker in leaning type (put the name in a strong) beside the time; the content holds Bubbles, attachments or anything else; the footer is a quiet line. align="end" puts a turn on the other side, for your own. MessageAvatar holds an Avatar level with the turn's last line.
Props
Message
| Prop | Type | Default | Description |
|---|---|---|---|
| align | "start" | "end" | "start" | Which side the turn sits on. |