Bubble

The Bubble component displays framed conversational content. Use it for chat text, short structured output, quoted replies, suggestions, and reactions.

For full-featured chat interfaces, use the Message component. Bubble is intentionally scoped to the bubble surface. Place avatars, names, timestamps, metadata, and message-level actions in Message.

Variants

Use variant to change the visual treatment of the bubble.

A bubble sizes to its content, up to 80% of the container width. The ghost variant removes the max-width so assistant text and rich content can span the full row.

• default: a strong primary bubble, usually for the current user.
• secondary: the standard neutral bubble for conversation content.
• muted: a lower-emphasis bubble for quiet supporting content.
• tinted: a subtle primary-tinted bubble.
• outline: a bordered bubble for secondary or rich content.
• ghost: unframed content for assistant text or rich content.
• destructive: a destructive bubble for error or failed actions.

Alignment

Use align on Bubble to align the bubble to the start or end of the conversation. start puts it at the start, end puts it at the end.

Note: when building chat interfaces, you probably want to set align on the Message component itself. Bubbles inside MessageContent automatically follow the message alignment.

Bubble Group

Use BubbleGroup to group consecutive bubbles from the same sender. Note the align prop should be set on the Bubble component itself, not the BubbleGroup component.

BubbleGroup
├── Bubble
│   └── BubbleContent
└── Bubble
    └── BubbleContent

Links and Buttons

Use as-child to merge BubbleContent styling and attributes onto a link or button passed through its default slot.

<script setup>
import { Bubble, BubbleContent } from "@/components/ui/bubble";
</script>

<template>
  <Bubble variant="muted">
    <BubbleContent as-child>
      <button type="button">Click here</button>
    </BubbleContent>
  </Bubble>
</template>

Reactions

Use BubbleReactions for bubble reactions. You can use it to display reactions or quick action buttons. Use side and align to position the row, side="top" anchors it to the upper edge. Reactions overlap the bubble edge, so leave vertical space between rows; the examples below use a larger gap for this reason.

Show More / Collapsible

Long bubble content can be composed with Collapsible to allow for a show more or show less interaction. Use the CollapsibleTrigger component to trigger the collapsible content.

Tooltip

Wrap a bubble in a Tooltip to reveal metadata on hover, such as when a message was read.

Popover

Pair a bubble with a Popover to surface more information on demand, such as the full error message for a failed action.

Styling

Every part carries a data-slot attribute and its variant state, so a style sheet can paint the whole surface without touching the components. Bubble sets data-slot="bubble" plus data-variant and data-align; BubbleContent sets data-slot="bubble-content"; BubbleReactions sets data-slot="bubble-reactions" plus data-align and data-side; BubbleGroup sets data-slot="bubble-group".

The index also exports two cva helpers, bubbleVariants and bubbleReactionsVariants, if you need the same class list outside the components.

Two classes read state from a parent, so keep them in mind when composing: .cn-bubble reads group-data-[align=end]/message from a surrounding Message, and .cn-bubble-content reads group-data-[align=end]/bubble from its own Bubble. Color is applied to the content slots rather than the bubble root, which is why a single Bubble can hold several BubbleContent blocks and paint each one as its own pill.

Anatomy

Import all parts and piece them together.

<script setup>
import {
  Bubble,
  BubbleContent,
  BubbleGroup,
  BubbleReactions,
} from "@/components/ui/bubble";
</script>

<template>
  <BubbleGroup>
    <Bubble>
      <BubbleContent />
      <BubbleReactions />
    </Bubble>
  </BubbleGroup>
</template>

API Reference

Accessibility

Keyboard shortcuts and ARIA behavior.