shadcn.io is not affiliated with official shadcn/ui
Shadcn Bubble for React
Conversational bubble with variants, alignment, grouping, and reactions.
Hey there! what's up?
Hey! Want to see chat bubbles?
I can group messages, switch sides, and keep the whole thread easy to scan.
👍
Sure. Hit me with your best demo.
Yes. You are reading a demo that is demoing itself. Very meta. Very on-brand.
👍🔥👀+2
Installation
bunx --bun shadcn@latest add https://kit.dev/r/base/bubble.jsonnpx shadcn@latest add https://kit.dev/r/base/bubble.jsonpnpm dlx shadcn@latest add https://kit.dev/r/base/bubble.jsonyarn shadcn@latest add https://kit.dev/r/base/bubble.jsonInstall the following dependencies:
bun add @base-ui/react tailwind-variantsnpm install @base-ui/react tailwind-variantspnpm add @base-ui/react tailwind-variantsyarn add @base-ui/react tailwind-variantsCopy and paste the following code into your project.
"use client";
import { mergeProps } from "@base-ui/react/merge-props";
import { useRender } from "@base-ui/react/use-render";
import type * as React from "react";
import { tv, type VariantProps } from "tailwind-variants";
import { cn } from "@/lib/utils";
function BubbleGroup({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
className={cn("cn-bubble-group flex min-w-0 flex-col", className)}
data-slot="bubble-group"
{...props}
/>
);
}Update the import paths to match your project setup.
Anatomy
Bubble
├── BubbleContent
└── BubbleReactionsBubbleGroup
├── Bubble
│ └── BubbleContent
└── Bubble
└── BubbleContentUsage
import { Bubble, BubbleContent, BubbleReactions } from "@/components/ui/bubble";<Bubble className="max-w-full min-w-0">
<BubbleContent>
I checked the registry output and removed the stale route.
</BubbleContent>
<BubbleReactions>
<span>👍</span>
</BubbleReactions>
</Bubble>