Shadcn Bubble

A bubble is the framed message. Color and side tell you who spoke; reactions hang off the edge. Use it for chat text, suggestion chips, and short errors. Avatars, names, and timestamps belong on Message.

Usage

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

<Bubble>
  <BubbleContent>
    I checked the registry output and removed the stale route.
  </BubbleContent>
  <BubbleReactions>
    <span>👍</span>
  </BubbleReactions>
</Bubble>

variant paints the surface. align="end" sends it to the right.

Composition

BubbleGroup stacks consecutive bubbles from the same sender. Put align on each Bubble, not the group.

Variants

default is you. secondary, muted, tinted, and outline are them. ghost is unframed assistant text — it also drops the 80% max-width. destructive is a failed action.

Alignment

start is received. end is sent. In a full chat row, set alignment on Message instead.

Bubble Group

Wrap consecutive bubbles from the same person. Spacing stays tight; align still lives on each Bubble.

Links and Buttons

render={<button />} on BubbleContent turns the surface into a real control. Use it for suggestion chips.

Reactions

BubbleReactions anchors to an edge. side is top or bottom, align is start or end. They overlap the bubble, so leave extra gap between rows.

Show More / Collapsible

Long text composes with Collapsible. The trigger is a “Show more” link inside BubbleContent.

Tooltip

Wrap a bubble in a Tooltip to show when it was read.

Popover

Pair a destructive bubble with a Popover when the full error should wait for a click.

Markdown

Render assistant text through Markdown (Streamdown). Keep user bubbles as plain text.

API

BubbleContent

BubbleReactions

Bubble, BubbleContent, BubbleReactions, and BubbleGroup take className.

Notes

Color is not the error. Put the reason in the destructive text.

With other components

Questions

Related