@wa-ui
Production-ready WhatsApp Web UI components built on WDS design tokens with Tailwind CSS v4 and @base-ui/react.
Install this registry
npx shadcn@latest add https://ui.meta-cloud-api.site/r/registry.json pnpm dlx shadcn@latest add https://ui.meta-cloud-api.site/r/registry.json bunx shadcn@latest add https://ui.meta-cloud-api.site/r/registry.json curl -s https://ui.meta-cloud-api.site/r/registry.json Components
29 totalWhatsApp-style message bubble with incoming/outgoing variants, timestamps, read receipts, group chat sender, and animated tail.
npx shadcn@latest add https://ui.meta-cloud-api.site/r/chat-bubble.json WhatsApp-style conversation list row with color avatar initials, name, last message, timestamp, unread badge, read receipts, mute, and pin.
npx shadcn@latest add https://ui.meta-cloud-api.site/r/chat-list-item.json WhatsApp-style conversation header with avatar, contact name, online status, and action buttons.
npx shadcn@latest add https://ui.meta-cloud-api.site/r/chat-header.json WhatsApp-style message composer with emoji, attachment, auto-resize textarea, and send/voice toggle.
npx shadcn@latest add https://ui.meta-cloud-api.site/r/message-input.json WhatsApp-style centered date pill divider for separating messages by date.
npx shadcn@latest add https://ui.meta-cloud-api.site/r/date-separator.json WhatsApp-style animated typing indicator with three bouncing dots and optional sender name.
npx shadcn@latest add https://ui.meta-cloud-api.site/r/typing-indicator.json WhatsApp-style emoji reaction pill with count and toggle state using @base-ui/react Toggle.
npx shadcn@latest add https://ui.meta-cloud-api.site/r/reaction-pill.json WhatsApp-style image bubble supporting single image, multi-image grid (2x2 with +N overflow), loading skeleton, and captions.
npx shadcn@latest add https://ui.meta-cloud-api.site/r/image-bubble.json WhatsApp-style video message bubble with play/pause, duration badge, caption, and read receipts.
npx shadcn@latest add https://ui.meta-cloud-api.site/r/video-bubble.json WhatsApp-style voice message with play/pause, waveform, playback progress, duration, and read receipts.
npx shadcn@latest add https://ui.meta-cloud-api.site/r/voice-message-bubble.json WhatsApp-style file bubble with type-based color icon badge, file name/size, download progress via @base-ui/react Progress, and read receipts.
npx shadcn@latest add https://ui.meta-cloud-api.site/r/file-attachment-bubble.json WhatsApp Business template message bubble supporting text/image/video/document/location headers and url/phone/quick_reply/copy_code/flow/call_permission button…
npx shadcn@latest add https://ui.meta-cloud-api.site/r/template-bubble.json WhatsApp Business carousel template with horizontal scrollable cards using @base-ui/react ScrollArea.
npx shadcn@latest add https://ui.meta-cloud-api.site/r/carousel-template.json WhatsApp Business calling permission request bubble with animated bottom sheet, radio options, and calling rules footer using @base-ui/react Drawer and RadioGr…
npx shadcn@latest add https://ui.meta-cloud-api.site/r/call-permission.json Shared MessageStatus type and MessageStatusIcon — sending, sent, delivered, read, failed.
npx shadcn@latest add https://ui.meta-cloud-api.site/r/message-status.json WhatsApp-style location message with map preview, name/address, and Open in Maps CTA.
npx shadcn@latest add https://ui.meta-cloud-api.site/r/location-bubble.json WhatsApp-style contact card — single or multiple contacts with name, phone, avatar, and action buttons.
npx shadcn@latest add https://ui.meta-cloud-api.site/r/contact-bubble.json WhatsApp-style sticker message — 160×160px, no bubble background, animated badge support.
npx shadcn@latest add https://ui.meta-cloud-api.site/r/sticker-bubble.json Centered system notice pill — encryption notices, number changes, and other system events.
npx shadcn@latest add https://ui.meta-cloud-api.site/r/system-message-bubble.json Quoted message strip shown inside a bubble — author, body preview, media type icon, thumbnail.
npx shadcn@latest add https://ui.meta-cloud-api.site/r/reply-preview.json Small italic label indicating a forwarded or frequently forwarded message.
npx shadcn@latest add https://ui.meta-cloud-api.site/r/forwarded-label.json Fallback bubble for unknown or unsupported WhatsApp message types.
npx shadcn@latest add https://ui.meta-cloud-api.site/r/unsupported-message-bubble.json WhatsApp interactive button message — up to 3 reply buttons with header/body/footer.
npx shadcn@latest add https://ui.meta-cloud-api.site/r/interactive-button-bubble.json WhatsApp interactive CTA URL message — single external link button with body/footer.
npx shadcn@latest add https://ui.meta-cloud-api.site/r/cta-url-bubble.json WhatsApp interactive list message — CTA opens a bottom sheet with selectable sections and rows.
npx shadcn@latest add https://ui.meta-cloud-api.site/r/list-message-bubble.json WhatsApp-style interactive reply bubble — shows received button, list, or flow replies with icon and subtype label.
npx shadcn@latest add https://ui.meta-cloud-api.site/r/interactive-reply-bubble.json WhatsApp-style emoji reaction display — single reaction with count or overlapping multi-reaction group.
npx shadcn@latest add https://ui.meta-cloud-api.site/r/reaction.json WhatsApp-style outlined pill action button with optional icon, using @base-ui/react Button.
npx shadcn@latest add https://ui.meta-cloud-api.site/r/action-button.json WhatsApp-style context dropdown menu with icons, links, danger items, using @base-ui/react Menu.
npx shadcn@latest add https://ui.meta-cloud-api.site/r/chat-menu.json