Pro Components
Base Components
Chat App
Full-featured chat application UI with contact list, message threads, unread badges, and real-time message input. Includes mobile-friendly drawer navigation for small screens.
Example
Messages
SB
Shannon Baker
Active now
S
Shannon
I think you should go for it. You're more than capable and it sounds like a great opportunity for growth.
07:31 AMIt's a bigger company and a more challenging role. I'm worried it might be too much to handle.
07:35 AMThanks, I needed that encouragement. I'll start working on my application tonight.
07:36 AMS
Shannon
Anytime! Let me know if you need any help with your resume or cover letter.
07:38 AMWill do. Appreciate it!
07:39 AMIntroduction
Chat App includes:- Contact list & search: Sidebar with threads, unread counts, and status; keyboard-friendly navigation.
- Message thread: Scrollable history with avatars, bubbles, and group chat detail.
- Compose: Textarea and send via input group; desktop and mobile-friendly layout.
- Mobile drawer:
vauldrawer for the main chat on small viewports; sidebar + panel split on desktop. - State: Zustand for contacts, messages, and UI (active chat, mobile drawer).
Usage
import { ChatAppPage } from "@/components/ui/chat-app-page";
<ChatAppPage />;