104Get started
HextaUI

Bubble: Group

Wrap consecutive messages from one sender in <BubbleGroup />. Corners on the sender side tighten so the run reads as one block, and a lone bubble stays fully round.

Hey!
Did the deploy land?
Asking because the dashboard still shows the old build number and I want to confirm before I post the announcement.
It did.
Hard refresh 🙏
A single bubble in a group stays round.
import { Bubble, BubbleContent, BubbleGroup } from "@/components/ui/bubble"

export function BubbleGroupDemo() {
  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      <BubbleGroup>
        <Bubble variant="secondary">
          <BubbleContent>Hey!</BubbleContent>
        </Bubble>
        <Bubble variant="secondary">
          <BubbleContent>Did the deploy land?</BubbleContent>
        </Bubble>
        <Bubble variant="secondary">
          <BubbleContent>
            Asking because the dashboard still shows the old build number and I
            want to confirm before I post the announcement.
          </BubbleContent>
        </Bubble>
      </BubbleGroup>
      <BubbleGroup>
        <Bubble align="end">
          <BubbleContent>It did.</BubbleContent>
        </Bubble>
        <Bubble align="end">
          <BubbleContent>Hard refresh 🙏</BubbleContent>
        </Bubble>
      </BubbleGroup>
      <BubbleGroup>
        <Bubble variant="outline">
          <BubbleContent>A single bubble in a group stays round.</BubbleContent>
        </Bubble>
      </BubbleGroup>
    </div>
  )
}

Add this example

This adds the example as components/examples/bubble/group.tsx, together with the Bubble component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/bubble-group.json

To add only the component, follow the Bubble installation.

Props in this example

The Bubble props this example sets, from the API reference.

Bubble

PropTypeDefault
variant
"default" | "secondary" | "muted" | "tinted" | "outline" | "ghost" | "destructive""default"
align
"start" | "end""start"

Every prop is in the Bubble API reference.

More Bubble examples

See them all, with keyboard support and accessibility notes, on the Bubble page.

Related components