ChatBubble
Individual message bubble for chat interfaces. Supports sent and received variants with sender name and timestamp.
Received Message
Incoming message bubble with sender name and timestamp.
Alice
Hey, how's the project going?
2:30 PMSent Message
Outgoing message bubble aligned to the right.
Going great! Just pushed the latest changes.
2:31 PMConversation
Full back-and-forth conversation between two participants.
Alice
Hey, how's the project going?
2:30 PMGoing great! Just pushed the latest changes.
2:31 PMAlice
Awesome! Can you send me the PR link?
2:32 PMSure, just sent it to your email.
2:33 PMGroup Chat
Multiple senders in a group conversation thread.
Bob
Who's joining the standup?
3:00 PMAlice
I'll be there!
3:01 PMCount me in.
3:01 PMUsage
Props
| Prop | Type | Default | Description |
|---|---|---|---|
sender | text | "" | Sender name displayed above the bubble |
time | text | "" | Timestamp displayed below the bubble |
variant | text | "received" | Style variant: received or sent |
children | content | - | Message content |