Quick Start

Get up and running with CometChat React UI Kit v7 in under 5 minutes.

Goal

By the end of this guide you will have a working chat interface showing a conversations list and messages — all powered by CometChat React UI Kit v7.

Prerequisites

• Node.js 18 or later
• A CometChat account with an App ID, Region, and Auth Key (create one here)
• A React project (Vite, CRA, Next.js, or Astro)

Step 1: Install the package

npm

npm install @cometchat/chat-uikit-react @cometchat/chat-sdk-javascript

Step 2: Import styles

Add the CSS import at the top of your application entry file (e.g., main.tsx or App.tsx):

import "@cometchat/chat-uikit-react/styles";

Step 3: Wrap your app with CometChatProvider

CometChatProvider initializes the SDK, authenticates the user, and provides context to all child components.

import { CometChatProvider } from "@cometchat/chat-uikit-react";

function App() {
  return (
    <CometChatProvider
      appId="YOUR_APP_ID"
      region="YOUR_REGION"
      authKey="YOUR_AUTH_KEY"
    >
      <Chat />
    </CometChatProvider>
  );
}

Replace YOUR_APP_ID, YOUR_REGION, and YOUR_AUTH_KEY with your CometChat credentials.

Step 4: Build a minimal chat interface

Create a Chat component that renders a conversations list alongside a message list:

import { useState } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
  CometChatConversations,
  CometChatMessageList,
  CometChatMessageComposer,
} from "@cometchat/chat-uikit-react";

function Chat() {
  const [user, setUser] = useState<CometChat.User | null>(null);
  const [group, setGroup] = useState<CometChat.Group | null>(null);

  const handleConversationClick = (conversation: CometChat.Conversation) => {
    const conversationWith = conversation.getConversationWith();
    if (conversationWith instanceof CometChat.User) {
      setUser(conversationWith);
      setGroup(null);
    } else {
      setGroup(conversationWith as CometChat.Group);
      setUser(null);
    }
  };

  return (
    <div style={{ display: "flex", height: "100vh" }}>
      <div style={{ width: "360px", borderRight: "1px solid #eee" }}>
        <CometChatConversations onItemClick={handleConversationClick} />
      </div>
      <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
        {(user || group) && (
          <>
            <CometChatMessageList user={user!} group={group!} />
            <CometChatMessageComposer user={user!} group={group!} />
          </>
        )}
      </div>
    </div>
  );
}

Complete Example

Putting it all together in a single file:

import "@cometchat/chat-uikit-react/styles";
import { useState } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
  CometChatProvider,
  CometChatConversations,
  CometChatMessageList,
  CometChatMessageComposer,
} from "@cometchat/chat-uikit-react";

export default function App() {
  const [user, setUser] = useState<CometChat.User | null>(null);
  const [group, setGroup] = useState<CometChat.Group | null>(null);

  const handleConversationClick = (conversation: CometChat.Conversation) => {
    const conversationWith = conversation.getConversationWith();
    if (conversationWith instanceof CometChat.User) {
      setUser(conversationWith);
      setGroup(null);
    } else {
      setGroup(conversationWith as CometChat.Group);
      setUser(null);
    }
  };

  return (
    <CometChatProvider
      appId="YOUR_APP_ID"
      region="YOUR_REGION"
      authKey="YOUR_AUTH_KEY"
    >
      <div style={{ display: "flex", height: "100vh" }}>
        <div style={{ width: "360px", borderRight: "1px solid #eee" }}>
          <CometChatConversations onItemClick={handleConversationClick} />
        </div>
        <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
          {(user || group) && (
            <>
              <CometChatMessageList user={user!} group={group!} />
              <CometChatMessageComposer user={user!} group={group!} />
            </>
          )}
        </div>
      </div>
    </CometChatProvider>
  );
}

Next Steps

• Components Overview — understand the compound component architecture
• CometChatProvider — learn about provider configuration and internal composition
• Theming — customize colors with CSS custom properties
• Plugin System — extend message rendering with custom plugins