#What is Shadcn Chat?

Shadcn Chat is a free, open-source CLI tool and component library by Jakob Hoeg, designed to extend shadcn-ui with customizable chat components for building modern chat interfaces. It’s ideal for developers creating AI-powered chatbots, support systems, or messaging features in Next.js or React projects, enabling rapid setup of chat UIs in under five minutes.

Built with React, TypeScript, Tailwind CSS, shadcn-ui, Emoji Mart, Framer Motion, and Lucide Icons, it offers components like ChatBubble, ChatInput, and an expandable Chat window, with features like emoji support, animations, and auto-scroll. It integrates via shadcn CLI (npx shadcn-chat-cli add) or NPM (shadcn-chat), aligning with shadcn-ui’s accessible, polished design.

#Features ⚡️

• Chat Components:

  • ChatBubble: Customizable message bubbles with layout and variant props.

  • ChatInput: Text input with emoji picker and send button.

  • Chat: Expandable chat window with message streaming support.

• Auto-Scroll: useAutoScroll hook improves UX by scrolling to new messages (v1.0.1).

• Emoji Support: Integrated Emoji Mart for rich message input.

• Animations: Framer Motion for smooth transitions and effects.

• Accessible Design: Inherits shadcn-ui’s WAI-ARIA compliance.

• CLI/NPM Integration: Install via npx shadcn-chat-cli add or pnpm add shadcn-chat.

• Vercel AI SDK Example: Demo with streaming AI chatbot.

#Pros and Cons

#Pros ✅

• shadcn-ui Compatibility: Seamlessly matches shadcn-ui’s aesthetic and accessibility.

• Free and Open-Source: MIT license allows unrestricted use and customization.

• Rapid Setup: Build chat UIs in minutes with CLI or NPM.

• Community Traction: 1.3k stars, 91 forks, and active engagement on Reddit/X (June 2025).

• Flexible: Supports AI chatbots, support systems, or custom messaging.

#Cons ⚠️

• React Dependency: Limited to React/shadcn-ui ecosystems.

• Setup Requirements: Needs shadcn-ui, Tailwind CSS, and dependencies like Emoji Mart and Framer Motion.

• Client-Side Focus: Requires server-side logic for message persistence or AI integration.

• Dependency Overhead: Adds multiple libraries, increasing bundle size.

• Early-Stage Docs: Some features (e.g., advanced customization) lack detailed guides.

#Included Components

• Chat: Main component for the chat window, supporting expand/collapse and streaming.

• ChatBubble: Message bubble with customizable layout, variants, and props.

• ChatBubbleAction: Action buttons for messages (e.g., retry, copy).

• ChatInput: Input field with emoji picker and send functionality.

• useAutoScroll: Hook for auto-scrolling to new messages.

#Pricing 💸

Shadcn Chat is completely free under the MIT license, with no premium tiers.

#Integrations 🧰

• React: Core framework for components.

• shadcn-ui: Provides accessible primitives (Button, Input, etc.).

• Tailwind CSS: Utility-first styling for responsive design.

• Next.js: Optimized for Next.js projects (v14.2+).

• TypeScript: Ensures type safety.

• Emoji Mart: Powers emoji picker in ChatInput.

• Framer Motion: Enables animations for chat transitions.

• Lucide Icons: Icon library for UI elements.

• Vercel AI SDK: Optional for AI-powered chatbot demos.