Shadcn.io is not affiliated with official shadcn/ui
Chat Conversation List
React conversation inbox list for Next.js with avatars, message previews, unread badges, timestamps, filter tabs, pin indicators, search bar, hover actions, and active row highlight using TypeScript, shadcn/ui, and Tailwind CSS
A conversation inbox panel for React and Next.js that displays all your active chats in a scannable list. Each row shows the contact's avatar, name, a truncated message preview, a relative timestamp, and an unread count badge. Filter tabs at the top let you switch between All, Unread, and Groups. Pinned conversations show a pin indicator. Hover reveals mute and archive actions. Built with TypeScript, shadcn/ui Avatar, Badge, and Input components, Tailwind CSS, and Lucide React icons.
Related Components
Direct Message Chat
Clean 1-on-1 DM with profile and seen indicators
Anonymous Chat
Privacy-first anonymous chat with animal avatars
Channel List
Channel browser with starred and direct messages
Recent Chats
Compact recent conversations widget
Minimal Chat
Ultra-clean minimal 1-on-1 chat interface
Bubble Style Chat
Classic rounded bubble messages with pointer tails
FAQ
Was this page helpful?
Sign in to leave feedback.
Conversation Info
React chat conversation info side panel for Next.js with group details, member list with roles, shared media preview, notification settings, and leave action using TypeScript, shadcn/ui, and Tailwind CSS
Conversation Summary
React chat block with AI-generated conversation summary side panel for Next.js featuring key topics, action items, and sentiment analysis using TypeScript, shadcn/ui, Tailwind CSS