ChatBubble

A single chat message bubble with avatar, sender name, and timestamp.

ExamplesCodeUsageChangelog

Basic usage

A

Alice10:32 AM

Hey there! How's the project going?

Tailwind v4

<ChatBubble
  message="Hey there! How's the project going?"
  sender="Alice"
  timestamp="10:32 AM"
  avatarInitials="A"
/>

Left and right positions

Use position="right" for messages sent by the current user.

A

Alice10:32 AM

Hey there! How's the project going?

Y

You10:33 AM

Pretty good! Just finished the API integration. Should be ready to demo tomorrow.

A

Alice10:34 AM

That's great news. Can you send over the docs when you have a moment?

Y

You10:34 AM

Sure! Sending now.

Tailwind v4

<ChatBubble
  message="Hey there! How's the project going?"
  sender="Alice"
  timestamp="10:32 AM"
  avatarInitials="A"
  position="left"
/>
<ChatBubble
  message="Pretty good! Just finished the API integration."
  sender="You"
  timestamp="10:33 AM"
  avatarInitials="Y"
  position="right"
/>
<ChatBubble
  message="That's great news. Can you send over the docs?"
  sender="Alice"
  timestamp="10:34 AM"
  avatarInitials="A"
  position="left"
/>
<ChatBubble
  message="Sure! Sending now."
  sender="You"
  timestamp="10:34 AM"
  avatarInitials="Y"
  position="right"
/>

With avatar image

Pass avatarSrc to show a profile photo instead of initials.

Taylor2:15 PM

I've reviewed the pull request and left some comments.

Tailwind v4

<ChatBubble
  message="I've reviewed the pull request and left some comments."
  sender="Taylor"
  timestamp="2:15 PM"
  avatarSrc="https://i.pravatar.cc/64?img=3"
  position="left"
/>

Minimal (no metadata)

Omit sender and timestamp for a minimal bubble with no header.

J

Can you help me with this?

M

Of course! What do you need?

Tailwind v4

<ChatBubble message="Can you help me with this?" avatarInitials="J" position="left" />
<ChatBubble message="Of course! What do you need?" avatarInitials="M" position="right" />

Props

Prop	Type	Default	Description
message	string	required	The message text to display
sender	string	undefined	Sender name shown above the bubble
timestamp	string	undefined	Time/date string shown next to sender name
position	'left' | 'right'	'left'	Which side the bubble appears on
avatarSrc	string	undefined	URL for the avatar image
avatarInitials	string	undefined	Fallback initials when no image is provided