## Installation [#installation] npm pnpm yarn bun ```bash npx shadcn@latest add @dotui/bubble ``` ```bash pnpm dlx shadcn@latest add @dotui/bubble ``` ```bash yarn dlx shadcn@latest add @dotui/bubble ``` ```bash bun x shadcn@latest add @dotui/bubble ``` ## Usage [#usage] ```tsx import { Bubble, BubbleContent } from "@/ui/bubble" ``` ```tsx Shipping it this week 🚀 ``` ## Anatomy [#anatomy] `Bubble` positions one message on a side of the conversation and styles the `BubbleContent` inside it — `variant` picks the surface (primary, neutral, muted, tinted, outline, ghost or danger), `align` picks the side. Consecutive bubbles from the same sender stack inside a `BubbleGroup`, and `BubbleReactions` pins emoji reactions to a corner of the bubble. ```tsx import { Bubble, BubbleContent, BubbleGroup, BubbleReactions, } from "@/ui/bubble" ``` ```tsx We just passed 10k stars! 🎉 3 ``` ## Examples [#examples] ## API Reference [#api-reference] ### BubbleGroup [#bubblegroup] ### Bubble [#bubble] ### BubbleContent [#bubblecontent] ### BubbleReactions [#bubblereactions]