Toggle Sidebar B
AppearanceLight & dark mode D

Message

Lays out a row in the conversation - avatar, alignment, header, content, and footer - and groups consecutive turns from the same sender.

Default

An assistant turn: MessageAvatar plus MessageContent wrapping a Bubble.

Replay preview
Hi! I'm your assistant. Ask me anything and I'll do my best to help.

Rows

A full row composes MessageAvatar, MessageHeader, MessageContent (with a Bubble), and MessageFooter.

Replay preview
Assistant10:24
A message row composes an avatar, header, content, and footer.
SC
10:25
Set align to "end" to reverse the row for the active user.

Avatar

MessageAvatar self-aligns to the end of the row, so it stays level with the last line of the bubble on either side.

Replay preview
The avatar sits at the bottom of the row, so it lines up with the last line of a taller bubble.
SC
On the end side the whole row reverses, so my avatar hugs the right edge.

Group

Consecutive turns from one sender stack tightly; show the avatar only on the last and pad a spacer on the rest.

Replay preview
Here's what I found for your trip.
Flights are cheapest on Tuesday morning.
Want me to hold a seat for you?

Actions

Drop ghost icon Buttons into MessageFooter for copy, retry, and feedback controls.

Replay preview
The capital of France is Paris. Anything else you'd like to know?

Attachment

Stack an Attachment card above the bubble inside MessageContent to send a file with the message.

Replay preview
SC
proposal.pdf2.4 MB
Here's the draft — let me know what you think.

Grouped

Wrap consecutive turns in MessageGroup so they stack with a tight gap.

Replay preview
Three messages in a row…
…from the same sender…
…stack tightly inside a MessageGroup.

Alignment

Set align to "start" or "end". The row reverses and the footer follows.

Replay preview
align="start" keeps the row left.
align="end" reverses it to the right.

API Reference

Message

PropTypeDefaultDescription
align"start" | "end""start"Which side the row sits on. end reverses the flex order.
classstringExtra classes, merged with cn().
SlotDescription
defaultMessageAvatar and MessageContent.

MessageContent

SlotDescription
defaultHeader, bubble(s), and footer.

MessageAvatar

SlotDescription
defaultAvatar image, initials, or icon.

MessageHeader

SlotDescription
defaultSender name and metadata.

MessageFooter

SlotDescription
defaultTimestamp or delivery status.

MessageGroup

SlotDescription
defaultConsecutive Message rows.