Browse components

Bubble

Conversational surface with variants, grouping, and reactions.

Install

npx shadcn@latest add https://ui.anuragroy.dev/r/bubble.json

Preview

Loading preview…

Installation

Add the component from this site. The shadcn CLI fetches the registry JSON over HTTPS — no named registry submission required.

Terminal

npx shadcn@latest add https://ui.anuragroy.dev/r/bubble.json

GitHub fallback if the website is down:

Terminal

npx shadcn@latest add https://raw.githubusercontent.com/anurag-roy/ui.anuragroy.dev/main/public/r/bubble.json

Usage

Import paths follow your components.json aliases. After install, the default path is @/components/ui/bubble.

Import

import {  Bubble,  BubbleContent,  BubbleGroup,  BubbleReactions} from "@/components/ui/bubble"

example.tsx

import {  Bubble,  BubbleContent,  BubbleGroup,  BubbleReactions,} from "@/components/ui/bubble"export function Example() {  return (    <BubbleGroup>      <Bubble variant="secondary">        <BubbleContent>Neutral assistant bubble.</BubbleContent>      </Bubble>      <Bubble variant="default" align="end">        <BubbleContent>Primary user bubble.</BubbleContent>        <BubbleReactions>👍</BubbleReactions>      </Bubble>    </BubbleGroup>  )}

API Reference

Bubble

Prop	Type	Default
variant	"default" \| "secondary" \| "muted" \| "tinted" \| "outline" \| "ghost" \| "destructive"	"default"
align	"start" \| "end"	—

BubbleReactions

Prop	Type	Default
side	"top" \| "bottom"	"bottom"
align	"start" \| "end"	"end"