Skip to main content
Quick Reference for AI Agents & Developers
# Install
npm install @cometchat/chat-uikit-react

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

// Initialize
const UIKitSettings = new UIKitSettingsBuilder()
  .setAppId("APP_ID")
  .setRegion("REGION")
  .setAuthKey("AUTH_KEY")
  .build();

CometChatUIKit.init(UIKitSettings);

// Login
CometChatUIKit.login("UID");

// Key Components
import { CometChatConversations } from "@cometchat/chat-uikit-react";
<CometChatConversations onItemClick={(conversation) => console.log(conversation)} />

import { CometChatMessageList, CometChatMessageComposer } from "@cometchat/chat-uikit-react";
<CometChatMessageList user={selectedUser} />
<CometChatMessageComposer user={selectedUser} />
The CometChat UI Kit for React is a powerful solution designed to seamlessly integrate chat functionality into applications. It provides a robust set of prebuilt UI components that are modular, customizable, and highly scalable, allowing developers to accelerate their development process with minimal effort.
You must call CometChatUIKit.init(UIKitSettings) before rendering any UI Kit components or calling any SDK methods. Initialization must complete before login.
Auth Key is for development/testing only. In production, generate Auth Tokens on your server using the REST API and pass them to the client. Never expose Auth Keys in production client code.
Server-Side Rendering (SSR): CometChat UI Kit requires browser APIs (window, WebSocket, document). For Next.js or other SSR frameworks, ensure components render only on the client side. See the Next.js Integration guide.

​
Why Choose CometChat UI Kit?

  • Rapid Integration – Prebuilt UI components for faster deployment.
  • Customizable & Flexible – Modify the UI to align with your brand’s identity.
  • Cross-Platform Compatibility – Works seamlessly across various React-based frameworks.
  • Scalable & Reliable – Built on CometChat’s robust chat infrastructure for enterprise-grade performance.

​
User Interface Preview

​
Try Live Demo

Experience the CometChat UI Kit in action:

Launch Live Demo

https://mintcdn.com/cometchat-22654f5b-docs-react-ui-kit-v6/-D0ssBhBEXyP6GbC/images/CodeSandbox_Square_Logo.svg?fit=max&auto=format&n=-D0ssBhBEXyP6GbC&q=85&s=349071af01043c746e3b77ad1663862d

Edit in CodeSandbox

Tip: You can fork the sandbox, insert your CometChat credentials (App ID, Region, Auth Key) in the code, and immediately preview how the UI and messages respond in real time.

​
Integration

A collection of individual components—like conversation lists, message lists, message composer, etc.—each with built-in chat logic so you can customize every element.
How It Works
  • Import the components you need from our UI Kits.
  • Arrange them in your desired layout, applying styling or customization as needed.
  • You don’t need to rewrite the SDK calls yourself—each component already integrates with CometChat logic.
Why It’s Great
  • Flexible Design – You control the final UI arrangement.
  • No Extra Overhead – Implement only the features you need.
  • Modular – Use exactly what you want, when you want.

React

Next.js

React Router

Astro

​
Next Steps

React.js Integration

Get started with React.js setup and configuration

Next.js Integration

Integrate with Next.js and SSR support

Components Overview

Explore all available UI components

Theming

Customize colors, fonts, and styling

​
Helpful Resources

Explore these essential resources to gain a deeper understanding of CometChat UI Kits and streamline your integration process.

React Sample App

Fully functional sample applications to accelerate your development.View on GitHub

UI Kit Source Code

Access the complete UI Kit source code on GitHub.View on GitHub

Figma Design File

UI design resources for customization and prototyping.View on Figma

​
Need Help?

If you need assistance, check out:

​
Next Steps

React.js Integration

Step-by-step guide to integrate CometChat in your React app

Components Overview

Explore all available UI components and their capabilities

Core Features

Learn about messaging, conversations, and user management

Theme Customization

Customize colors, fonts, and styling to match your brand