WA UI

A shadcn/ui registry of WhatsApp Web components, built directly on WhatsApp's WDS design tokens.

If you're building on top of WhatsApp — whether it's a SaaS platform, a customer support tool, or a Meta Cloud API integration — you shouldn't have to rebuild the UI from scratch. This registry gives you the exact same components, colors, and spacing that WhatsApp uses, ready to drop into your React app with a single command.

Demo · Registry

---

Install

npx shadcn@latest add https://ui.meta-cloud-api.site/r/chat-bubble.json

Each component is independent — install only what you need.

---

What's included

Component
chat-bubble	Text messages, group chat, reactions, read receipts, message tail
chat-header	Contact name, avatar, online status, action buttons
chat-list-item	Sidebar row with unread badge, mute/pin, delivery status
message-input	Compose bar with emoji, attachment, auto-resize, send/voice
template-bubble	Meta Business templates — URL, phone, copy_code, flow, OTP, catalog
carousel-template	Horizontal product cards (Meta carousel template)
call-permission	Calling permission request with bottom sheet
image-bubble	Single image, 2×2 grid, video with play overlay
voice-message-bubble	Waveform, progress, real <audio> playback, avatar
file-attachment-bubble	File type badge, progress bar, native download
reaction-pill	Emoji reactions — 1:1 and group modes
typing-indicator	Animated three-dot indicator
date-separator	Date pill between message groups
action-button	Outlined pill CTA button
chat-menu	Context dropdown with animated popup
message-bubble	Wrapper that attaches reactions to any bubble type
message-actions	Right-click / long-press menu with quick reactions, Reply, Copy
reply-bar	"Replying to…" strip above the compose bar
emoji-picker	Compose-bar emoji button with a categorized grid
message-text	WhatsApp bold / italic / strike / code and clickable links
media-viewer	Full-screen photo/video viewer with caption, download, prev/next

---

Design system

Every component uses the WDS (WhatsApp Design System) tokens — the same CSS variables that WhatsApp Web ships. Colors, spacing, border radii, and typography are all sourced directly from WDS, with both light and dark mode variants.

See DESIGN.md for the full token reference.

---

Stack

• Tailwind CSS v4 — utility classes mapped to WDS tokens
• @base-ui/react — accessible primitives (Button, Toggle, Menu, Drawer…)
• shadcn/ui registry — install with npx shadcn add

---

License

MIT · Contributing