Components / Chat
Message
The row around a bubble: avatar gutter, author line, status slot. Mirrors for outgoing messages.
Install — needs @hiip registered in components.json
bunx shadcn@latest add @hiip/messageOr by URL, with the token in the query
bunx shadcn@latest add "https://ui.hiip.ai/r/message.json?token=$HIIP_REGISTRY_TOKEN"Both need a token — set one up.
Anatomy
Import from components/ui/hiip-ui/message.
<MessageGroup>
<Message align="start">
<MessageAvatar />
<MessageContent>
<MessageHeader />
{/* one or more <Bubble> */}
<MessageFooter />
</MessageContent>
</Message>
</MessageGroup>Examples
function MessageDemo() {
return (
<MessageGroup className="w-full max-w-sm">
<Message>
<MessageAvatar className="size-8 text-xs">MK</MessageAvatar>
<MessageContent>
{/* Name then time, written once. The header mirrors itself on the
outgoing row below, so the same order reads correctly on both. */}
<MessageHeader>
Mai Khanh
<span className="font-normal">18 days ago</span>
</MessageHeader>
<Bubble variant="received">
<BubbleContent>Can I still join the campaign?</BubbleContent>
</Bubble>
{/* A grouped run: one author line, and only the LAST bubble carries
a time. */}
<Bubble variant="received">
<BubbleContent>
Mình cf nha
<BubbleTime dateTime="2026-08-27">18 days ago</BubbleTime>
</BubbleContent>
<BubbleReactions>❤️</BubbleReactions>
</Bubble>
</MessageContent>
</Message>
<Message align="end">
<MessageAvatar className="size-8 bg-primary text-xs text-primary-foreground">
KN
</MessageAvatar>
<MessageContent>
<MessageHeader>
Khoa Nguyễn
<span className="font-normal">18 days ago</span>
</MessageHeader>
<Bubble variant="sent" align="end">
<BubbleContent>
You can — briefing is open until Friday.
</BubbleContent>
</Bubble>
{/* The footer is the STATUS slot, now that the timestamp lives inside
the bubble. Two different facts, so two different places. */}
<MessageFooter>Seen</MessageFooter>
</MessageContent>
</Message>
</MessageGroup>
);
}API Reference
Generated from the source. Props forwarded to the underlying element are not listed.
MessageGroup
No props of its own.
Message
| Prop | Type | Default |
|---|---|---|
align | "start" | "end" | undefined | "start" |
MessageAvatar
No props of its own.
MessageContent
No props of its own.
MessageHeader
No props of its own.
MessageFooter
No props of its own.
- Type
registry:ui- Files written
- components/ui/hiip-ui/message.tsx