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.

·

Install

bash
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-bubbleText messages, group chat, reactions, read receipts, message tail
chat-headerContact name, avatar, online status, action buttons
chat-list-itemSidebar row with unread badge, mute/pin, delivery status
message-inputCompose bar with emoji, attachment, auto-resize, send/voice
template-bubbleMeta Business templates — URL, phone, copy_code, flow, OTP, catalog
carousel-templateHorizontal product cards (Meta carousel template)
call-permissionCalling permission request with bottom sheet
image-bubbleSingle image, 2×2 grid, video with play overlay
voice-message-bubbleWaveform, progress, real <audio> playback, avatar
file-attachment-bubbleFile type badge, progress bar, native download
reaction-pillEmoji reactions — 1:1 and group modes
typing-indicatorAnimated three-dot indicator
date-separatorDate pill between message groups
action-buttonOutlined pill CTA button
chat-menuContext dropdown with animated popup
message-bubbleWrapper that attaches reactions to any bubble type

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 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

·