Chat Bubble

Compose chat conversations with optional avatars, headers, timestamps, and per-bubble colour tokens. Each ChatBubble renders a single message row — stack them to build a thread.

Basic

side="start" aligns left (incoming); side="end" aligns right (outgoing).

With avatar

Supply avatarSrc to render a chat-image section beside the bubble.

avatar on start + end

You were the Chosen One!

I hate you!

Header, footer & avatar

Add header, time, and footer for a rich message card — name, timestamp, and delivery status.

full metadata

Obi-Wan Kenobi 12:45

It's over Anakin, I have the high ground.

Delivered

Anakin Skywalker 12:46

You underestimate my power!

Seen at 12:46

Header & footer without avatar

avatarSrc is optional — header and footer work independently.

Bubble colors

The color prop maps to chat-bubble-{color}. All 8 DaisyUI color tokens are supported.

Full conversation

A realistic thread combining avatars, headers, timestamps, footers, and colors.

conversation thread

Obi-Wan Kenobi 12:30

Hello there!

Anakin Skywalker 12:31

General Kenobi.

Obi-Wan Kenobi 12:44

It's over Anakin, I have the high ground.

Anakin Skywalker 12:45

You underestimate my power!

Seen at 12:45

Obi-Wan Kenobi 12:46

Don't try it.

Delivered