Installation

Get chatcn up and running in your Next.js project in under a minute.

Prerequisites

Next.js 14+ with App Router
React 18+
Tailwind CSS 4+ configured in your project
shadcn/ui initialized (chatcn builds on top of it)

Install

Run the init command to set up chatcn in your project. This installs the chat components, theme CSS variables, and required dependencies.

npx shadcn@latest add https://raw.githubusercontent.com/leonickson1/chatcn/main/public/r/chat.json

Project Structure

After installation, your project will have these new files:

src/
  components/
    ui/
      chat/
        chat.tsx          # Core chat components
        features.tsx      # Extended features
        layouts.tsx       # Pre-built layout blocks
        hooks.ts          # Utility hooks
        types.ts          # TypeScript types
        security.ts       # Sanitization utilities
        index.ts          # Barrel exports
  app/
    globals.css           # Theme CSS variables added here

Quick Start

Here is a minimal example to get a working chat interface. Wrap your page with ChatProvider, then use ChatMessages and ChatComposer.

import {
  ChatProvider,
  ChatMessages,
  ChatComposer,
} from "@/components/ui/chat"
import type { ChatUser, ChatMessageData } from "@/components/ui/chat"

const currentUser: ChatUser = {
  id: "user-1",
  name: "You",
  status: "online",
}

const messages: ChatMessageData[] = [
  {
    id: "1",
    senderId: "user-2",
    senderName: "Alice",
    text: "Hey! How are you?",
    timestamp: Date.now() - 60000,
    status: "read",
  },
  {
    id: "2",
    senderId: "user-1",
    senderName: "You",
    text: "Doing great! Working on the new chat UI.",
    timestamp: Date.now() - 30000,
    status: "delivered",
  },
]

export default function MyChatPage() {
  return (
    <ChatProvider currentUser={currentUser} theme="lunar">
      <div className="flex h-screen flex-col">
        <ChatMessages messages={messages} />
        <ChatComposer onSend={(text) => console.log(text)} />
      </div>
    </ChatProvider>
  )
}

Tailwind Configuration

chatcn uses Tailwind CSS v4 for styling. Tailwind v4 uses CSS-based configuration — no tailwind.config.ts needed. The installer adds theme variables to your globals.css automatically:

/* app/globals.css */
/* Tailwind CSS v4 uses CSS-based configuration. */
/* The chatcn installer automatically adds theme   */
/* variables to your globals.css. No tailwind.config needed. */

@import "tailwindcss";

/* chatcn theme variables are injected below this line */

← Introduction Theming →