A reusable platform-aware chat preview with pixel-accurate bubbles, headers and composers for iMessage, WhatsApp, Slack, Discord and Telegram.
Command Palette
Search for a command to run...
Search for a command to run...
A reusable platform-aware chat preview with pixel-accurate bubbles, headers and composers for iMessage, WhatsApp, Slack, Discord and Telegram.
A single component that switches its entire UI per platform via a platform prop. Pair with <IPhoneMockup> to produce landing-page hero screens, onboarding screenshots, or product walkthroughs.
Light, white background, no header chrome. Outgoing bubbles use the canonical iMessage vertical gradient (#309BFE → #027BFF). The tail silhouette is rendered with a CSS clip-path so it composites cleanly on any background.
pixel-perfect label.git rebase real quicknpx shadcn@latest add https://ui.heygaia.io/r/chat-demo.jsonimport { ChatDemo } from "@/components/ui/chat-demo";
import { IPhoneMockup } from "@/components/ui/iphone-mockup";
export default function Example() {
return (
<IPhoneMockup>
<ChatDemo
platform="imessage"
title="GAIA"
messages={[
{ from: "them", text: "Morning ☀️", time: "9:41 AM" },
{ from: "me", text: "Morning!", status: "read" },
]}
/>
</IPhoneMockup>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
platform | "imessage" | "whatsapp" | "slack" | "discord" | "telegram" | – | Which platform's chrome and bubbles to render. |
messages | ChatMessageItem[] | – | Messages to display. See shape below. |
title | string | – | Contact name (or channel name for Slack / Discord). |
subtitle | string | – | Header subtitle (e.g. online, 42 members). |
headerAvatar | string | github avatar | URL for the conversation avatar (iMessage / WhatsApp / Telegram). |
showComposer | boolean | true | Toggle the bottom composer row. |
theme | "light" | "dark" | platform default | Force light/dark theme. Discord defaults to dark. |
className | string | – | Extra classes for the outer wrapper. |
ChatMessageItem| Field | Type | Notes |
|---|---|---|
from | "me" | "them" | Outgoing vs incoming. Ignored by Slack & Discord (use author). |
text | string | Message body. Slack and Discord support @mentions, #channels and `inline code` formatting. |
time | string | Timestamp string shown alongside the message. |
author | string | Author name (Slack / Discord). |
authorColor | string | Username color (Discord). |
avatar | string | Author avatar URL (Slack / Discord). |
status | "sent" | "delivered" | "read" | Delivery state for outgoing messages (WhatsApp / Telegram ticks). |
reactions | { emoji: string, count: number }[] | Slack / Discord reaction chips. |
typing | boolean | Render an animated typing indicator instead of text. |