Shadcn Bubble: Chat Bubble UI Components for React
Bubble is a chat message component for building conversation interfaces with shadcn/ui. It handles the details that make a chat bubble UI feel right: sender alignment, message grouping, timestamps, avatars, and reactions, all styled with Tailwind CSS so the bubbles match the rest of your admin theme. It is a custom shadcn style component, which makes it a natural fit when you need a react chat component without adopting a heavyweight messaging SDK.
Below you will find seven copy-paste bubble examples covering the common shapes of a conversation: basic incoming and outgoing messages, grouped message runs, bubbles with reactions, messages containing links and buttons, avatar variants, and even a collapsible message for long content. Each example is production-ready TypeScript for Next.js and other React setups.
What the collection includes
- Basic bubbles: Incoming and outgoing message styles with sensible max widths and rounded corners that flip per sender.
- Grouped messages: Consecutive messages from the same sender collapse into a tight run with a single avatar and timestamp.
- Reactions: Emoji reaction rows attached to a bubble, ready to wire to your own reaction handler.
- Rich content: Bubbles that carry links and action buttons, useful for bot replies and system prompts.
- Avatar variants: Message rows that pair each bubble with a sender avatar for multi-user threads.
- Collapsible message: A long message that truncates behind an expand control so one wall of text does not dominate the thread.
Implementation tips
- Group by sender and time: Cluster messages from the same author within a short window before rendering, so the grouped variant gets clean data.
- Anchor scroll to the bottom: New messages should keep the view pinned to the latest bubble unless the user has scrolled up to read history.
- Render markdown carefully: If bubbles display user generated content, sanitize HTML and limit formatting to a safe subset.
- Use semantic timestamps: Show relative times in the thread and expose the full datetime in a tooltip or title attribute.
- Virtualize long threads: For chats with thousands of messages, pair the bubbles with a virtualized list to keep scrolling smooth.
Where it fits in a dashboard
Chat bubbles are the backbone of support inboxes, AI assistant panels, order messaging threads, and internal comment streams. In an admin dashboard the most common home is a conversation pane on a ticket or customer detail page, where agents read history and reply inline.
The same component also powers AI chat interfaces. Bot replies use the variant with links and buttons for suggested actions, while the collapsible message variant keeps long model outputs from overwhelming the thread.
Related components and patterns
A complete chat view combines several pieces. Sender identity comes from the Avatar component, the composer is usually a Textarea with a send Button, and the thread itself scrolls inside a Scroll Area.
The collapsible message variant builds on the same idea as the Collapsible component, and unread or status indicators pair naturally with a Badge. For a full messaging screen assembled from these parts, browse the chat sections in Blocks.
Library support
Bubble is a custom shadcn style component built with Tailwind CSS rather than a wrapper around a headless primitive, so there is no additional package to install. All bubble examples remain fully compatible with Radix UI and Base UI, which means you can drop them into an app that already uses either ecosystem and the conversation UI will share the same theme tokens as everything else.