# Bubble: Shapes

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

Example: https://hextaui.com/docs/bubble/examples/shapes
Component docs: https://hextaui.com/docs/bubble.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/bubble-shapes.json
```

This adds `components/examples/bubble/shapes.tsx` with the Bubble component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/bubble/shapes.tsx"
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>
  )
}
```

## Props in this example

### Bubble

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"default" \| "secondary" \| "muted" \| "tinted" \| "outline" \| "ghost" \| "destructive"` | `"default"` |  |
| `align` | `"start" \| "end"` | `"start"` |  |
| `shape` | `"uniform" \| "joined" \| "tail"` | `"joined"` | Inherited from BubbleGroup when not set. |

### BubbleGroup

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `shape` | `"uniform" \| "joined" \| "tail"` | – | Applies to every bubble inside the group. |

## More Bubble examples

- [Variants](https://hextaui.com/docs/bubble/examples/variants.md)
- [Alignment](https://hextaui.com/docs/bubble/examples/alignment.md)
- [Group](https://hextaui.com/docs/bubble/examples/group.md)
- [Tail](https://hextaui.com/docs/bubble/examples/tail.md)
- [Reactions](https://hextaui.com/docs/bubble/examples/reactions.md)
- [Show more](https://hextaui.com/docs/bubble/examples/show-more.md)
- [Tooltip](https://hextaui.com/docs/bubble/examples/tooltip.md)
- [Popover](https://hextaui.com/docs/bubble/examples/popover.md)
- [Long content](https://hextaui.com/docs/bubble/examples/long-content.md)
- [Nested reply](https://hextaui.com/docs/bubble/examples/nested.md)
- [Right to left](https://hextaui.com/docs/bubble/examples/rtl.md)