Bubble

1
import { Bubble, BubbleContent, BubbleGroup, BubbleReactions } from "~/components/ui/bubble";
2

3
export default function BubbleDemo() {
4
  return (
5
    <div class="flex w-full max-w-sm flex-col gap-8 py-12">
6
      <Bubble align="end">
7
        <BubbleContent>Hey there! What&apos;s up?</BubbleContent>
8
      </Bubble>
9
      <BubbleGroup>
10
        <Bubble variant="muted">
11
          <BubbleContent>Hey! Want to see chat bubbles?</BubbleContent>
12
        </Bubble>
13
        <Bubble variant="muted">
14
          <BubbleContent>
15
            I can group messages, switch sides, and keep the whole thread easy to scan.
16
          </BubbleContent>
17
          <BubbleReactions role="img" aria-label="Reaction: thumbs up">
18
            <span>👍</span>
19
          </BubbleReactions>
20
        </Bubble>
21
      </BubbleGroup>
22
      <Bubble align="end">
23
        <BubbleContent>Sure. Hit me with your best demo.</BubbleContent>
24
      </Bubble>
25
      <Bubble variant="muted">
26
        <BubbleContent>
27
          Yes. You are reading a demo that is demoing itself. Very meta. Very on-brand.
28
        </BubbleContent>
29
        <BubbleReactions role="img" aria-label="Reactions: thumbs up, fire, eyes, and 2 more">
30
          <span>👍</span>
31
          <span>🔥</span>
32
          <span>👀</span>
33
          <span>+2</span>
34
        </BubbleReactions>
35
      </Bubble>
36
    </div>
37
  );
38
}

1
import { Bubble, BubbleContent, BubbleReactions } from "~/components/ui/bubble";
2

3
export default function BubbleVariants() {
4
  return (
5
    <div class="flex w-full max-w-sm flex-col gap-12 py-12">
6
      <Bubble>
7
        <BubbleContent>This is the default primary bubble.</BubbleContent>
8
      </Bubble>
9
      <Bubble variant="secondary" align="end">
10
        <BubbleContent>This is the secondary variant.</BubbleContent>
11
      </Bubble>
12
      <Bubble variant="muted">
13
        <BubbleContent>
14
          This one is muted. It uses a lower emphasis color for the chat bubble.
15
        </BubbleContent>
16
        <BubbleReactions role="img" aria-label="Reaction: thumbs up">
17
          <span>👍</span>
18
        </BubbleReactions>
19
      </Bubble>
20
      <Bubble variant="tinted" align="end">
21
        <BubbleContent>
22
          This one is tinted. The tint is a softer color derived from the primary color.
23
        </BubbleContent>
24
      </Bubble>
25
      <Bubble variant="outline">
26
        <BubbleContent>We can also use an outlined variant.</BubbleContent>
27
      </Bubble>
28
      <Bubble variant="destructive" align="end">
29
        <BubbleContent>Or a destructive variant with a reaction.</BubbleContent>
30
        <BubbleReactions role="img" aria-label="Reaction: fire">
31
          <span>🔥</span>
32
        </BubbleReactions>
33
      </Bubble>
34
      <Bubble variant="ghost">
35
        <BubbleContent>
36
          <p>
37
            Ghost bubbles work for <strong>rich text</strong>, inline <code>code</code>, and other
38
            content that should not be framed.
39
          </p>
40
          <p class="mt-4">
41
            This is perfect for assistant messages that can take the full width of the container.
42
          </p>
43
        </BubbleContent>
44
      </Bubble>
45
    </div>
46
  );
47
}

1
import { Bubble, BubbleContent } from "~/components/ui/bubble";
2

3
export default function BubbleAlignment() {
4
  return (
5
    <div class="flex w-full max-w-sm flex-col gap-8 py-12">
6
      <Bubble variant="muted">
7
        <BubbleContent>
8
          This bubble is aligned to the start. This is the default alignment.
9
        </BubbleContent>
10
      </Bubble>
11
      <Bubble align="end">
12
        <BubbleContent>
13
          This bubble is aligned to the end. Use this for user messages.
14
        </BubbleContent>
15
      </Bubble>
16
    </div>
17
  );
18
}

1
import { Bubble, BubbleContent, BubbleGroup, BubbleReactions } from "~/components/ui/bubble";
2

3
export default function BubbleGroupDemo() {
4
  return (
5
    <div class="flex w-full max-w-sm flex-col gap-8 py-12">
6
      <Bubble variant="muted">
7
        <BubbleContent>Can you tell me what&apos;s the issue?</BubbleContent>
8
      </Bubble>
9
      <BubbleGroup>
10
        <Bubble align="end">
11
          <BubbleContent>You tell me!</BubbleContent>
12
        </Bubble>
13
        <Bubble align="end">
14
          <BubbleContent>It worked yesterday. You broke it!</BubbleContent>
15
        </Bubble>
16
        <Bubble align="end">
17
          <BubbleContent>Find the bug and fix it.</BubbleContent>
18
          <BubbleReactions role="img" aria-label="Reactions: eyes" align="start">
19
            <span>👀</span>
20
          </BubbleReactions>
21
        </Bubble>
22
      </BubbleGroup>
23
      <Bubble variant="muted">
24
        <BubbleContent>
25
          Want me to diff yesterday&apos;s you against today&apos;s you? It&apos;s a bit
26
          embarrassing.
27
        </BubbleContent>
28
      </Bubble>
29
    </div>
30
  );
31
}

1
import { toast } from "solid-sonner";
2
import { Bubble, BubbleContent, BubbleGroup } from "~/components/ui/bubble";
3
import { Toaster } from "~/components/ui/toast";
4

5
export default function BubbleLinkButton() {
6
  const notify = (description: string) => toast.success(description);
7

8
  return (
9
    <>
10
      <Toaster />
11
      <div class="flex w-full max-w-sm flex-col gap-8 py-12">
12
        <Bubble variant="muted">
13
          <BubbleContent>How can I help you today?</BubbleContent>
14
        </Bubble>
15
        <BubbleGroup>
16
          <Bubble variant="tinted" align="end">
17
            <BubbleContent
18
              as="button"
19
              type="button"
20
              onClick={() => notify("You clicked forgot password")}
21
            >
22
              I forgot my password
23
            </BubbleContent>
24
          </Bubble>
25
          <Bubble variant="tinted" align="end">
26
            <BubbleContent
27
              as="button"
28
              type="button"
29
              onClick={() => notify("You clicked help with subscription")}
30
            >
31
              I need help with my subscription
32
            </BubbleContent>
33
          </Bubble>
34
          <Bubble variant="tinted" align="end">
35
            <BubbleContent
36
              as="button"
37
              type="button"
38
              onClick={() => notify("You clicked something else. Talk to a human.")}
39
            >
40
              Something else. Talk to a human.
41
            </BubbleContent>
42
          </Bubble>
43
        </BubbleGroup>
44
      </div>
45
    </>
46
  );
47
}

1
import { toast } from "solid-sonner";
2
import { Bubble, BubbleContent, BubbleReactions } from "~/components/ui/bubble";
3
import { Button } from "~/components/ui/button";
4
import { Toaster } from "~/components/ui/toast";
5

6
export default function BubbleReactionsDemo() {
7
  return (
8
    <>
9
      <Toaster />
10
      <div class="flex w-full max-w-sm flex-col gap-12 py-12">
11
        <Bubble variant="muted" align="end">
12
          <BubbleContent>I don&apos;t need tests, I know my code works.</BubbleContent>
13
          <BubbleReactions align="start" role="img" aria-label="Reactions: thumbs up, surprised">
14
            <span>👍</span>
15
            <span>😮</span>
16
          </BubbleReactions>
17
        </Bubble>
18
        <Bubble variant="muted">
19
          <BubbleContent>
20
            Bold. Fine I&apos;ll add some tests. I&apos;ll let you know when they&apos;re done.
21
          </BubbleContent>
22
          <BubbleReactions role="img" aria-label="Reactions: eyes, rocket, and 2 more">
23
            <span>👀</span>
24
            <span>🚀</span>
25
            <span>+2</span>
26
          </BubbleReactions>
27
        </Bubble>
28
        <Bubble align="end">
29
          <BubbleContent>
30
            Tests passed on the first try. All 142 of them. Looking good!
31
          </BubbleContent>
32
          <BubbleReactions
33
            side="top"
34
            align="start"
35
            role="img"
36
            aria-label="Reactions: party popper, clapping hands"
37
          >
38
            <span>🎉</span>
39
            <span>👏</span>
40
          </BubbleReactions>
41
        </Bubble>
42
        <Bubble variant="destructive">
43
          <BubbleContent>Are you sure I can run this command?</BubbleContent>
44
          <BubbleReactions>
45
            <Button
46
              variant="ghost"
47
              size="xs"
48
              onClick={() => toast.success("You clicked yes, running command...")}
49
            >
50
              Yes, run it
51
            </Button>
52
          </BubbleReactions>
53
        </Bubble>
54
      </div>
55
    </>
56
  );
57
}

1
import { ChevronDownIcon } from "lucide-solid";
2
import { createSignal, Show } from "solid-js";
3
import { Bubble, BubbleContent } from "~/components/ui/bubble";
4
import { Button } from "~/components/ui/button";
5
import {
6
  Collapsible,
7
  CollapsibleContent,
8
  CollapsibleTrigger,
9
} from "~/components/ui/collapsible";
10

11
const text = `The accessibility review found two focus states that were visually too subtle in dark mode.
12

13
I checked the dialog, menu, and drawer paths because each one renders focusable controls inside a layered surface.
14

15
The dialog and drawer are fine. The menu needs the hover and focus tokens split so keyboard focus stays visible when the pointer is not involved.
16

17
I also recommend keeping the change in the style file instead of the primitive so the other themes can choose their own focus treatment later.`;
18

19
const previewLength = 180;
20

21
export default function BubbleCollapsible() {
22
  const [open, setOpen] = createSignal(false);
23
  const preview = `${text.slice(0, previewLength)}...`;
24

25
  return (
26
    <div class="flex w-full max-w-sm flex-col gap-8 py-12">
27
      <Bubble variant="muted">
28
        <BubbleContent>How can I help you today?</BubbleContent>
29
      </Bubble>
30
      <Bubble variant="muted" align="end">
31
        <BubbleContent class="whitespace-pre-line">
32
          <Collapsible open={open()} onOpenChange={setOpen}>
33
            <Show when={!open()}>
34
              <p>{preview}</p>
35
            </Show>
36
            <CollapsibleContent>
37
              <p>{text}</p>
38
            </CollapsibleContent>
39
            <CollapsibleTrigger
40
              as={Button}
41
              variant="link"
42
              class="group mt-2 h-auto gap-1 p-0 text-muted-foreground"
43
            >
44
              {open() ? "Show less" : "Show more"}
45
              <ChevronDownIcon class="transition-transform group-data-[expanded]:rotate-180" />
46
            </CollapsibleTrigger>
47
          </Collapsible>
48
        </BubbleContent>
49
      </Bubble>
50
    </div>
51
  );
52
}

1
import { CheckIcon } from "lucide-solid";
2
import { Bubble, BubbleContent, BubbleReactions } from "~/components/ui/bubble";
3
import { Button } from "~/components/ui/button";
4
import { Tooltip, TooltipContent, TooltipTrigger } from "~/components/ui/tooltip";
5

6
export default function BubbleTooltip() {
7
  return (
8
    <div class="flex w-full max-w-sm flex-col gap-4 py-12">
9
      <Bubble variant="secondary">
10
        <BubbleContent>Did you remove the stale route?</BubbleContent>
11
      </Bubble>
12
      <Bubble align="end">
13
        <BubbleContent>Yes, removed it from the registry.</BubbleContent>
14
        <BubbleReactions>
15
          <Tooltip>
16
            <TooltipTrigger
17
              as={Button}
18
              variant="ghost"
19
              size="icon-xs"
20
              aria-label="Message read details"
21
            >
22
              <CheckIcon />
23
            </TooltipTrigger>
24
            <TooltipContent>Read on Jan 5, 2026 at 4:32 PM</TooltipContent>
25
          </Tooltip>
26
        </BubbleReactions>
27
      </Bubble>
28
    </div>
29
  );
30
}

1
import { InfoIcon } from "lucide-solid";
2
import { Bubble, BubbleContent, BubbleReactions } from "~/components/ui/bubble";
3
import { Button } from "~/components/ui/button";
4
import {
5
  Popover,
6
  PopoverContent,
7
  PopoverDescription,
8
  PopoverHeader,
9
  PopoverTitle,
10
  PopoverTrigger,
11
} from "~/components/ui/popover";
12

13
export default function BubblePopover() {
14
  return (
15
    <div class="flex w-full max-w-sm flex-col gap-4 py-12">
16
      <Bubble align="end">
17
        <BubbleContent>Run the build script.</BubbleContent>
18
      </Bubble>
19
      <Bubble variant="destructive">
20
        <BubbleContent>Failed to run the command.</BubbleContent>
21
        <BubbleReactions>
22
          <Popover>
23
            <PopoverTrigger
24
              as={Button}
25
              variant="ghost"
26
              size="icon-xs"
27
              aria-label="Show error details"
28
              class="aria-expanded:text-destructive"
29
            >
30
              <InfoIcon />
31
            </PopoverTrigger>
32
            <PopoverContent>
33
              <PopoverHeader>
34
                <PopoverTitle class="text-sm">Command failed with exit code 1</PopoverTitle>
35
                <PopoverDescription class="text-sm">
36
                  ENOENT: no such file or directory, open pnpm-lock.yaml
37
                </PopoverDescription>
38
              </PopoverHeader>
39
            </PopoverContent>
40
          </Popover>
41
        </BubbleReactions>
42
      </Bubble>
43
    </div>
44
  );
45
}