104Get started
HextaUI

Bubble: Shapes

Set shape on a group to style all of its bubbles, or on a single bubble. joined is the default.

uniform Every bubble fully round.

Hey!
Did the deploy land?
It did.
Hard refresh and you should see build 1482 on the dashboard.
Perfect 🙏

joined Grouped corners tighten on the sender side.

Hey!
Did the deploy land?
It did.
Hard refresh and you should see build 1482 on the dashboard.
Perfect 🙏

tail The last bubble of a group gets a tail.

Hey!
Did the deploy land?
It did.
Hard refresh and you should see build 1482 on the dashboard.
Perfect 🙏
import { Bubble, BubbleContent, BubbleGroup } from "@/components/ui/bubble"

const shapes = [
  { shape: "uniform", description: "Every bubble fully round." },
  {
    shape: "joined",
    description: "Grouped corners tighten on the sender side.",
  },
  { shape: "tail", description: "The last bubble of a group gets a tail." },
] as const

export function BubbleShapes() {
  return (
    <div className="flex w-full max-w-md flex-col gap-10">
      {shapes.map(({ shape, description }) => (
        <div key={shape} className="flex flex-col gap-3">
          <p className="text-xs text-muted-foreground">
            <span className="font-medium text-foreground">{shape}</span>{" "}
            {description}
          </p>
          <BubbleGroup shape={shape}>
            <Bubble variant="secondary">
              <BubbleContent>Hey!</BubbleContent>
            </Bubble>
            <Bubble variant="secondary">
              <BubbleContent>Did the deploy land?</BubbleContent>
            </Bubble>
          </BubbleGroup>
          <BubbleGroup shape={shape}>
            <Bubble align="end">
              <BubbleContent>It did.</BubbleContent>
            </Bubble>
            <Bubble align="end">
              <BubbleContent>
                Hard refresh and you should see build 1482 on the dashboard.
              </BubbleContent>
            </Bubble>
          </BubbleGroup>
          <Bubble shape={shape} variant="secondary">
            <BubbleContent>Perfect 🙏</BubbleContent>
          </Bubble>
        </div>
      ))}
    </div>
  )
}

Add this example

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

pnpm dlx shadcn@latest add https://hextaui.com/r/bubble-shapes.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"
shapeInherited from BubbleGroup when not set.
"uniform" | "joined" | "tail""joined"

BubbleGroup

PropTypeDefault
shapeApplies to every bubble inside the group.
"uniform" | "joined" | "tail"–

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