Bubble

Message bubbles as in Messages: blue for what you send, grey for what you receive.

@cupertinoui/bubbleRegistry JSON

Are we still on for the design review?

Yes! 10:00 in the big room.

👍

Great, I’ll bring the Dock mockups.

Shared “Roadmap.key” with you.

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

// A conversation in Messages.
export default function BubbleDemo() {
  return (
    <BubbleGroup className="w-full max-w-sm">
      <Bubble variant="secondary">
        <BubbleContent>Are we still on for the design review?</BubbleContent>
      </Bubble>
      <Bubble align="end">
        <BubbleContent>Yes! 10:00 in the big room.</BubbleContent>
        <BubbleReactions align="start">👍</BubbleReactions>
      </Bubble>
      <Bubble variant="secondary" className="mt-2">
        <BubbleContent>Great, I’ll bring the Dock mockups.</BubbleContent>
      </Bubble>
      <Bubble variant="tinted" align="end">
        <BubbleContent>Shared “Roadmap.key” with you.</BubbleContent>
      </Bubble>
    </BubbleGroup>
  )
}

Installation

pnpm dlx shadcn@latest add @cupertinoui/bubble

The first install also adds the macOS theme. See Installation to set up the registry.

Usage

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

<Bubble align="end">
  <BubbleContent>On my way!</BubbleContent>
</Bubble>

API Reference

Every part forwards the props of the underlying element. The props below are the ones CupertinoUI adds or changes.

Bubble

Prop	Type	Description
`variant`	`"default" \| "secondary" \| "muted" \| "tinted" \| "outline" \| "ghost" \| "destructive"` Default: `"default"`	Sent (blue), received (grey) and other styles.
`align`	`"start" \| "end"` Default: `"start"`	Which side it sits on.
`className`	`string`	Extra classes, merged with the component's own.

BubbleReactions

Prop	Type	Description
`side / align`		Where the reaction sits on the bubble.
`className`	`string`	Extra classes, merged with the component's own.