Introduction
Beautiful, accessible chat components. Copy and paste into your apps. Built with React, Tailwind CSS, and Radix UI.
Why chatcn?
Chat interfaces are one of the most common UI patterns, yet there are no good component libraries for them. You end up building from scratch every time — handling message grouping, timestamps, read receipts, reactions, reply threads, typing indicators, and dozens of edge cases.
chatcn gives you production-ready chat components that you own. Not a dependency — actual source code you can read, modify, and extend. Like shadcn/ui but for chat.
Complete Messaging Toolkit
chatcn gives you everything you need for production chat UIs:
- Messaging: Message grouping, avatars, reactions, replies, typing indicators, read receipts, pinned messages, and more.
- Media: Image previews, file attachments, code blocks, and link previews rendered inside message bubbles.
- Layouts: Full Messenger, Chat Widget, Inline Chat, Chat Board, and Live Chat — ready to drop in.
The ChatProvider context wraps everything, so theming and configuration apply consistently.
Features
4 Built-in Themes
Lunar, Aurora, Ember, and Midnight. Each with light and dark mode, fully customizable via CSS variables.
Rich Messaging
Messages, reactions, threads, read receipts, typing indicators, file sharing, and media previews.
Accessible by Default
Keyboard navigation, screen reader support, and reduced motion preferences built in.
Composable Architecture
Mix and match components. Use ChatMessages alone, or compose a full messenger layout.
5 Pre-built Blocks
Full Messenger, Chat Widget, Inline Chat, Chat Board, and Live Chat. Install with one command.
Backend Agnostic
Works with any backend. Bring your own data layer, or use Vercel AI SDK, Anthropic, OpenAI, and more.