Back to Components
Components
Chat Bubble
Message bubble with avatar, timestamp, tail pointer for left/right alignment, and read receipt dots.
J
Hey, how are you?
10:42 AMRead
M
I'm doing great! Just finished the new designs.
10:43 AMDelivered
J
Nice! Can you send them over?
10:44 AMSent
Dependencies
- clsx
- tailwind-merge
Files
- components/ui/chat-bubble.tsx
Installation
Using shadcn CLI
npx shadcn add chat-bubble --url https://ui.hampton.ioManual installation
Copy the component file to your project and install dependencies:
npm install clsx tailwind-merge