A Full Messaging Screen in One Block
Chat App is a complete two-panel messaging interface: a contact sidebar with personal and group tabs on one side, and the active conversation with its message bubbles, sender labels, timestamps, and composer on the other. Header actions for calls and video sit above the thread, and unread badges keep the contact list honest.
It is built as a Shadcn UI block, so the whole screen arrives as composed components rather than a kit of parts. On mobile the sidebar gives way to a bottom drawer, which means the block covers phone-width messaging without a separate layout.
Products That Need a Chat Screen
Team communication tools are the obvious use, but the same layout serves marketplaces connecting buyers and sellers, patient or client messaging in service platforms, community apps with group rooms, and in-product support inboxes. Any interface where people exchange messages in threads maps onto this structure.
For adjacent patterns, the library also covers model-driven conversations in AI chats and loose building pieces in chat UI widgets, so you can pick a full screen, an assistant, or individual parts depending on the product.
State Management With Zustand
All chat state flows through a Zustand store: contacts, groups, the message map per conversation, the active chat, the personal or groups tab, unread counts, and the mobile drawer flag. Sending a message is a store action that appends to the right thread and updates the contact preview, so the UI components stay thin and declarative.
That separation is what makes the block practical to productionize. Your WebSocket or API layer talks to the store, and the sidebar, thread, and badges re-render from it, without threading props through the component tree. The rest of the stack is standard: React, Tailwind utilities, Lucide icons, and a use-mobile hook that decides when the drawer takes over.
Design Tokens From Bubble to Sidebar
Message bubbles are the clearest example of the theming model: outgoing messages sit on the primary token, incoming ones on muted, and both flip correctly between dark and light mode because the colors come from globals.css variables rather than hardcoded values. Sidebar, borders, and timestamps follow the same system.
To make it yours, adjust the primary token for your brand's bubble color, tune the radius variable for rounder or squarer bubbles, and edit the header actions to match your feature set. Since contacts and messages are plain typed data, populating the screen with your own fixtures takes minutes.
Components Included and How to Install Them
The block uses Shadcn UI Avatar, Badge, Button, Button Group, Input, Input Group, Tabs, and Drawer components. It ships in React, Vuejs, and Svelte versions built on one design, with the Vuejs and Svelte editions building on the shadcn-vue and shadcn-svelte ports.
Chat App is a pro block, so the code tab and CLI install unlock with an All Access plan. After that, the shadcn CLI command at the top of the example page installs everything with npm, pnpm, yarn, or bun, or you can copy the layout, sidebar, main panel, and store files from the code tab. Connect your realtime backend to the store actions and the interface is live.