About
An animated iOS-style messenger chat that plays a conversation: typing in the composer, sending, file uploads with progress bar, typing indicator and read receipts. Pass your own contact, avatar and messages; themed with shadcn CSS variables for light and dark mode, plays when scrolled into view, can loop and respects reduced motion.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Animated WhatsApp Chat to your project and fits it to your theme.
Code
How Animated WhatsApp Chat is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
"use client";
import { WhatsAppChat, type ChatMessage } from "@/components/ui/whatsapp-chat";
const germanMessages: ChatMessage[] = [
{ from: "them", time: "14:20", text: "Hallo! Hier ist die Rechnung für März." },
{
from: "them",
time: "14:20",
file: { name: "Rechnung_2026-03.pdf", meta: "1 Seite · PDF · 180 KB" },
},
{ from: "me", time: "14:22", text: "Danke, ist angekommen! Überweise ich heute noch." },
];
function DemoTwo() {
return (
<div className="flex min-h-[44rem] w-full items-center justify-center bg-background p-6">
<WhatsAppChat
contact={{ name: "Studio Nord" }}
messages={germanMessages}
labels={{ online: "online", typing: "schreibt …", today: "Heute" }}
autoPlay="mount"
loop
/>
</div>
);
}
export default DemoTwo;
More by Martin Geltl
View all
FAQ with AI Ask
Ember Fire Button