WA UI

Overview

WA UI is a shadcn/ui registry of 34 WhatsApp Web interface components for React, built on WhatsApp's WDS design tokens. Every component uses the same CSS variables WhatsApp Web ships, so colors, spacing, border radii and typography match, with light and dark mode included.

It is aimed at developers building chat products or WhatsApp Business tooling, and sits alongside the meta-cloud-api SDK from the same author. Each component installs independently with the shadcn CLI, and a live playground shows them together. Several components, such as the chat menu and file attachment bubble, are built on @base-ui/react.

Features

• Chat: Chat bubble with incoming and outgoing variants, read receipts and animated tail, plus chat header, chat list item and date separator.
• Composer: Message input with emoji, attachment, auto-resizing textarea and send or voice toggle, plus reply bar and emoji picker.
• Media bubbles: Image grids with overflow, video, voice messages with waveform, file attachments with download progress, location, contact and sticker.
• Meta Business templates: Template bubble, carousel template, CTA URL, list message and interactive button and reply bubbles.
• Message states: Shared MessageStatus type and icon for sending, sent, delivered, read and failed.
• Interactions: Typing indicator, reactions, reaction pill, message actions, forwarded label and media viewer.
• WDS tokens: Styling sourced directly from WhatsApp Web's design token system.

Tech stack

• React, TypeScript
• Tailwind CSS v4
• @base-ui/react
• shadcn/ui registry

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @wa-ui/component-name