About
A WhatsApp/Telegram-style chat message bubble that renders incoming (left) or outgoing (right) messages with avatar, timestamp, and read receipt.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Chat Bubble to your project and fits it to your theme.
Code
How Chat Bubble is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { ChatBubble } from "@/components/ui/chat-bubble";
export default function ChatBubbleDemo() {
return (
<div className="w-full max-w-xs space-y-2 rounded-lg border border-border bg-background p-4">
<ChatBubble variant="incoming" timestamp="12:30">
Hello there!
</ChatBubble>
<ChatBubble variant="outgoing" timestamp="12:31" read>
Hi, how are you?
</ChatBubble>
<ChatBubble variant="incoming" timestamp="12:32">
I am good, thanks!
</ChatBubble>
</div>
);
}
Dependencies
More by serayudigital
View all
Date Picker
2
Data Table