title: Getting started with CometChat React UI Kit description: Build a real-time, two-panel chat UI in React using CometChat’s prebuilt conversation and messaging components. published: 2025-12-18

This guide helps you integrate the CometChat React UI Kit into your React app and build a modern chat experience with minimal setup.

What is CometChat React UI Kit

The CometChat React UI Kit is a collection of prebuilt, modular chat UI components that handle messaging, presence, and real-time updates out of the box. You can compose these components to build chat experiences without reinventing core chat functionality.

Prerequisites

Before you begin, make sure you have:

• A CometChat account and an app created in the CometChat Dashboard
• Your App ID, Region, and Auth Key
• Node.js 18 or later

Auth Keys are recommended only for development. For production apps, use Auth Tokens.

Create a React app

Create a new React app using Vite:

npm create vite@latest cometchat-react -- --template react-ts
cd cometchat-react
npm install

Install CometChat React UI Kit

Install the UI Kit package:

npm install @cometchat/chat-uikit-react

Import the CSS variables once in your app:

import "@cometchat/chat-uikit-react/css-variables.css";

Initialize CometChat

Initialize CometChat before rendering any UI components:

import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react";

const settings = new UIKitSettingsBuilder()
  .setAppId("YOUR_APP_ID")
  .setRegion("YOUR_REGION")
  .setAuthKey("YOUR_AUTH_KEY")
  .subscribePresenceForAllUsers()
  .build();

CometChatUIKit.init(settings)
  .then(() => console.log("CometChat initialized"))
  .catch(console.error);

Authenticate a user

Log in a user before rendering conversations or messages:

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

CometChatUIKit.login("cometchat-uid-1")
  .then(user => console.log("Logged in as", user.getUid()))
  .catch(console.error);

Build the chat layout

This guide uses a two-panel layout:

• Left panel for conversations
• Right panel for messages

Conversation list

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

export function ConversationList({ onSelect }) {
  return (
    <CometChatConversations
      onItemClick={(conversation) => {
        const target = conversation.getConversationWith();
        onSelect(target);
      }}
    />
  );
}

Message view

import {
  CometChatMessageHeader,
  CometChatMessageList,
  CometChatMessageComposer,
} from "@cometchat/chat-uikit-react";

export function MessageView({ user, group }) {
  if (!user && !group) {
    return <div>Select a conversation</div>;
  }

  return (
    <>
      <CometChatMessageHeader user={user} group={group} />
      <CometChatMessageList user={user} group={group} />
      <CometChatMessageComposer user={user} group={group} />
    </>
  );
}

Combine everything

import { useState } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { ConversationList } from "./ConversationList";
import { MessageView } from "./MessageView";

export default function App() {
  const [user, setUser] = useState();
  const [group, setGroup] = useState();

  return (
    <div className="chat-layout">
      <aside className="sidebar">
        <ConversationList
          onSelect={(item) => {
            if (item instanceof CometChat.User) {
              setUser(item);
              setGroup(undefined);
            } else {
              setGroup(item);
              setUser(undefined);
            }
          }}
        />
      </aside>
      <main className="chat-panel">
        <MessageView user={user} group={group} />
      </main>
    </div>
  );
}

Run the app

npm run dev

Next steps

• Switch to Auth Token authentication
• Customize the UI using CSS variables
• Explore advanced messaging features

You now have a working React chat UI powered by CometChat.