⚠️ Mobile is not supported yet.

wa-ui

Production-ready WhatsApp Web UI components built on WDS design tokens with Tailwind CSS v4 and @base-ui/react.

WhatsApp-style outlined pill action button with optional icon, using @base-ui/react Button.

WhatsApp Business calling permission request bubble with animated bottom sheet, radio options, and calling rules footer using @base-ui/react Drawer and RadioGroup.

component

@wa-ui/carousel-template

WhatsApp Business carousel template with horizontal scrollable cards using @base-ui/react ScrollArea.

component

@wa-ui/chat-bubble

WhatsApp-style message bubble with incoming/outgoing variants, timestamps, read receipts, group chat sender, and animated tail.

component

@wa-ui/chat-header

WhatsApp-style conversation header with avatar, contact name, online status, and action buttons.

component

@wa-ui/chat-list-item

WhatsApp-style conversation list row with color avatar initials, name, last message, timestamp, unread badge, read receipts, mute, and pin.

component

@wa-ui/chat-menu

WhatsApp-style context dropdown menu with icons, links, danger items, using @base-ui/react Menu.

component

@wa-ui/contact-bubble

WhatsApp-style contact card — single or multiple contacts with name, phone, avatar, and action buttons.

component

@wa-ui/cta-url-bubble

WhatsApp interactive CTA URL message — single external link button with body/footer.

component

@wa-ui/date-separator

WhatsApp-style centered date pill divider for separating messages by date.

component

@wa-ui/file-attachment-bubble

WhatsApp-style file bubble with type-based color icon badge, file name/size, download progress via @base-ui/react Progress, and read receipts.

component

@wa-ui/forwarded-label

Small italic label indicating a forwarded or frequently forwarded message.

component

@wa-ui/image-bubble

WhatsApp-style image bubble supporting single image, multi-image grid (2x2 with +N overflow), loading skeleton, and captions.

component

@wa-ui/interactive-button-bubble

WhatsApp interactive button message — up to 3 reply buttons with header/body/footer.

component

@wa-ui/interactive-reply-bubble

WhatsApp-style interactive reply bubble — shows received button, list, or flow replies with icon and subtype label.

component

@wa-ui/list-message-bubble

WhatsApp interactive list message — CTA opens a bottom sheet with selectable sections and rows.

component

@wa-ui/location-bubble

WhatsApp-style location message with map preview, name/address, and Open in Maps CTA.

component

@wa-ui/message-input

WhatsApp-style message composer with emoji, attachment, auto-resize textarea, and send/voice toggle.

component

@wa-ui/message-status

Shared MessageStatus type and MessageStatusIcon — sending, sent, delivered, read, failed.

component

@wa-ui/reaction

WhatsApp-style emoji reaction display — single reaction with count or overlapping multi-reaction group.

component

@wa-ui/reaction-pill

WhatsApp-style emoji reaction pill with count and toggle state using @base-ui/react Toggle.

component

@wa-ui/reply-preview

Quoted message strip shown inside a bubble — author, body preview, media type icon, thumbnail.

component

@wa-ui/sticker-bubble

WhatsApp-style sticker message — 160×160px, no bubble background, animated badge support.

component

@wa-ui/system-message-bubble

Centered system notice pill — encryption notices, number changes, and other system events.

component

@wa-ui/template-bubble

WhatsApp Business template message bubble supporting text/image/video/document/location headers and url/phone/quick_reply/copy_code/flow/call_permission buttons.

component

@wa-ui/typing-indicator

WhatsApp-style animated typing indicator with three bouncing dots and optional sender name.

component

@wa-ui/unsupported-message-bubble

Fallback bubble for unknown or unsupported WhatsApp message types.

component

@wa-ui/video-bubble

WhatsApp-style video message bubble with play/pause, duration badge, caption, and read receipts.

component

@wa-ui/voice-message-bubble

WhatsApp-style voice message with play/pause, waveform, playback progress, duration, and read receipts.

component