snapshot of https://github.com/shadcn-ui/ui.git (main, 2026-09-15; blobs > 131072B omitted)

apps/v4/examples/aria/bubble-demo.tsx

@@ -0,0 +1,48 @@
+import {
+  Bubble,
+  BubbleContent,
+  BubbleGroup,
+  BubbleReactions,
+} from "@/styles/aria-rhea/ui/bubble"
+
+export function BubbleDemo() {
+  return (
+    <div className="flex w-full max-w-sm flex-col gap-8 py-12">
+      <Bubble align="end">
+        <BubbleContent>Hey there! what&apos;s up?</BubbleContent>
+      </Bubble>
+      <BubbleGroup>
+        <Bubble variant="muted">
+          <BubbleContent>Hey! Want to see chat bubbles?</BubbleContent>
+        </Bubble>
+        <Bubble variant="muted">
+          <BubbleContent>
+            I can group messages, switch sides, and keep the whole thread easy
+            to scan.
+          </BubbleContent>
+          <BubbleReactions role="img" aria-label="Reaction: thumbs up">
+            <span>👍</span>
+          </BubbleReactions>
+        </Bubble>
+      </BubbleGroup>
+      <Bubble align="end">
+        <BubbleContent>Sure. Hit me with your best demo.</BubbleContent>
+      </Bubble>
+      <Bubble variant="muted">
+        <BubbleContent>
+          Yes. You are reading a demo that is demoing itself. Very meta. Very
+          on-brand.
+        </BubbleContent>
+        <BubbleReactions
+          role="img"
+          aria-label="Reactions: thumbs up, fire, eyes, and 2 more"
+        >
+          <span>👍</span>
+          <span>🔥</span>
+          <span>👀</span>
+          <span>+2</span>
+        </BubbleReactions>
+      </Bubble>
+    </div>
+  )
+}