Bubble

The surface a chat message sits on.

Installation#

Terminal

npx shadcn@latest add @zellify/bubble

Usage#

bubble.tsx

import {  BubbleGroup,  Bubble,  BubbleContent,  BubbleReactions,} from "@/components/ui/bubble"

Examples#

Sizes

This is a one line bubble.

This bubble has multiple lines. It should wrap to the next line and you should see a different radius on the corners.

This bubble has multiple lines.

It should wrap to the next line and you should see a different radius on the corners.

Here is some more text to see how it wraps.

Variants

Default bubbles use the primary color for the active user side of a chat.

Secondary bubbles are the standard neutral surface for assistant and conversation content.

Muted bubbles lower the emphasis for quiet system notes or for displaying supporting content.

Tinted bubbles use a softer primary tint when primary fill is too strong.

Outline bubbles can be used to frame message content and give it a border.

Destructive bubbles flag errors or failed actions in a conversation.

Ghost bubbles work for assistant text and other content that should not be framed. This is perfect for assistant messages that should not have a frame and can take the full width of the container. Ghost bubbles are full width and can take the full width of the container.

Alignment

This bubble is aligned to the start.

This bubble is aligned to the end.

This multiline bubble is aligned to the start. The corners should adjust when the text wraps to show the grouped side of the conversation.

This multiline bubble is aligned to the end. It should sit on the opposite side with the matching corner radius for wrapped text.

Grouped

I finished the audit pass.

The registry output looks clean, but I found one stale route.

Want me to remove it now?

Yes, clean that up.

Then rerun the registry build.

Collapsible

The accessibility review found two focus states that were visually too subtle in dark mode. I checked the dialog, menu, and drawer paths because each one renders focusable control...

Button & Links

This bubble is a link.

Chat Suggestions

How can I help you today?

Reaction Placement

side=bottom align=end

This is a one line message.

👍

A longer message that wraps across lines so the reaction offset is easier to inspect.

👍😮

A longer message that wraps across lines so the reaction offset is easier to inspect.

👍😮🔥👀+8

side=bottom align=start

This is a one line message.

🔥

A longer message that wraps across lines so the reaction offset is easier to inspect.

👍😮🔥👀

side=top align=start

This is a one line message.

🔥

A longer message that wraps across lines so the reaction offset is easier to inspect.

👍😮🔥👀

side=bottom align=end

This is a one line message.

👍

A longer message that wraps across lines so the reaction offset.

👍😮🔥👀

Reactions Buttons

This is a one line message.

We are going to the movies first then dinner. Are you in?

API reference#

Exports BubbleGroup Bubble BubbleContent BubbleReactions. Every part takes its element's usual props and a className.

Prop	Options	Default
variant	`defaultsecondarymutedtintedoutlineghostdestructive`	default

Prop	Options	Default
side	`topbottom`	bottom
align	`startend`	end

Sizes

This is a one line bubble.

This bubble has multiple lines. It should wrap to the next line and you should see a different radius on the corners.

This bubble has multiple lines.

It should wrap to the next line and you should see a different radius on the corners.

Here is some more text to see how it wraps.

Variants

Default bubbles use the primary color for the active user side of a chat.

Secondary bubbles are the standard neutral surface for assistant and conversation content.

Muted bubbles lower the emphasis for quiet system notes or for displaying supporting content.

Tinted bubbles use a softer primary tint when primary fill is too strong.

Outline bubbles can be used to frame message content and give it a border.

Destructive bubbles flag errors or failed actions in a conversation.

Alignment

This bubble is aligned to the start.

This bubble is aligned to the end.

This multiline bubble is aligned to the start. The corners should adjust when the text wraps to show the grouped side of the conversation.

This multiline bubble is aligned to the end. It should sit on the opposite side with the matching corner radius for wrapped text.

Grouped

I finished the audit pass.

The registry output looks clean, but I found one stale route.

Want me to remove it now?

Yes, clean that up.

Then rerun the registry build.

Collapsible

The accessibility review found two focus states that were visually too subtle in dark mode. I checked the dialog, menu, and drawer paths because each one renders focusable control...

Button & Links

This bubble is a link.

Chat Suggestions

How can I help you today?

Reaction Placement

side=bottom align=end

This is a one line message.

👍

A longer message that wraps across lines so the reaction offset is easier to inspect.

👍😮

A longer message that wraps across lines so the reaction offset is easier to inspect.

👍😮🔥👀+8

side=bottom align=start

This is a one line message.

🔥

A longer message that wraps across lines so the reaction offset is easier to inspect.

👍😮🔥👀

side=top align=start

This is a one line message.

🔥

A longer message that wraps across lines so the reaction offset is easier to inspect.

👍😮🔥👀

side=bottom align=end

This is a one line message.

👍

A longer message that wraps across lines so the reaction offset.

👍😮🔥👀

Reactions Buttons

This is a one line message.

We are going to the movies first then dinner. Are you in?