--- name: "@wa-ui" slug: "wa-ui" description: "Production-ready WhatsApp Web UI components built on WDS design tokens with Tailwind CSS v4 and @base-ui/react." category: "Forms" tags: ["audio", "blocks", "buttons", "cards", "forms", "maps", "marketing", "media", "navigation", "pro-available", "theming"] framework: "react" license: "MIT" author: "froggy1014" website: "https://ui.meta-cloud-api.site" github: "https://github.com/froggy1014/wa-ui" registry: "https://ui.meta-cloud-api.site/r/registry.json" pro: true pro_url: "https://ui.meta-cloud-api.site/pricing" github_stars: 10 component_count: 29 generated_at: "2026-09-05T09:50:59.044Z" --- # @wa-ui Production-ready WhatsApp Web UI components built on WDS design tokens with Tailwind CSS v4 and @base-ui/react. ## Links - Website: https://ui.meta-cloud-api.site - GitHub: https://github.com/froggy1014/wa-ui - Registry JSON: https://ui.meta-cloud-api.site/r/registry.json - Directory page: https://sh4dcn.vercel.app/registry/wa-ui - This file: https://sh4dcn.vercel.app/md/wa-ui.md - Pro / pricing: https://ui.meta-cloud-api.site/pricing ## Install ```sh # add the whole registry (shadcn CLI) 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 # clone the source repo git clone https://github.com/froggy1014/wa-ui.git # fetch the raw registry index curl -s https://ui.meta-cloud-api.site/r/registry.json ``` ## Components (29) | name | type | description | install | | --- | --- | --- | --- | | chat-bubble | registry:component | WhatsApp-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` | | chat-list-item | registry:component | 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` | | chat-header | registry:component | 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` | | message-input | registry:component | 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` | | date-separator | registry:component | 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` | | typing-indicator | registry:component | 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` | | reaction-pill | registry:component | 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` | | image-bubble | registry:component | 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` | | video-bubble | registry:component | 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` | | voice-message-bubble | registry:component | 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` | | file-attachment-bubble | registry:component | 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` | | template-bubble | registry:component | 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` | | carousel-template | registry:component | 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` | | call-permission | registry:component | 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` | | message-status | registry:component | Shared MessageStatus type and MessageStatusIcon — sending, sent, delivered, read, failed. | `npx shadcn@latest add https://ui.meta-cloud-api.site/r/message-status.json` | | location-bubble | registry:component | 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` | | contact-bubble | registry:component | 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` | | sticker-bubble | registry:component | 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` | | system-message-bubble | registry:component | 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` | | reply-preview | registry:component | 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` | | forwarded-label | registry:component | Small italic label indicating a forwarded or frequently forwarded message. | `npx shadcn@latest add https://ui.meta-cloud-api.site/r/forwarded-label.json` | | unsupported-message-bubble | registry:component | Fallback bubble for unknown or unsupported WhatsApp message types. | `npx shadcn@latest add https://ui.meta-cloud-api.site/r/unsupported-message-bubble.json` | | interactive-button-bubble | registry:component | 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` | | cta-url-bubble | registry:component | 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` | | list-message-bubble | registry:component | 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` | | interactive-reply-bubble | registry:component | 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` | | reaction | registry:component | 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` | | action-button | registry:component | 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` | | chat-menu | registry:component | 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` | ## For AI agents ```text You are adding components from @wa-ui to a shadcn-compatible project. 1. Read this file (https://sh4dcn.vercel.app/md/wa-ui.md) for the component list. 2. Fetch the machine-readable index: https://ui.meta-cloud-api.site/r/registry.json 3. Install a single component with its install command from the table above. 4. Full structured record: https://sh4dcn.vercel.app/json (library slug: wa-ui). ```