DEV Community

Cover image for chatcn: Production-Ready Chat UI Components for React
jQueryScript
jQueryScript

Posted on

chatcn: Production-Ready Chat UI Components for React

chatcn: a React chat UI component library built on shadcn/ui and Tailwind CSS v4.

Key highlights:

  • Message bubbles with grouping, replies, reactions, and read receipts
  • Composer with drag-and-drop uploads and voice recording
  • Media rendering for images, files, code blocks, and link previews
  • 4 themes: Lunar, Aurora, Ember, Midnight
  • 5 layout presets: FullMessenger, ChatWidget, InlineChat, ChatBoard, LiveChat
  • Full TypeScript support and keyboard accessibility

Components install as editable source files One CLI command via shadcn adds everything to your project.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Top comments (0)