> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Getting Started With CometChat React UI Kit
The **CometChat UI Kit for React** streamlines the integration of in-app chat functionality by providing a **comprehensive set of prebuilt UI components**. It offers seamless **theming options**, including **light and dark modes**, customizable fonts, colors, and extensive styling capabilities.
With built-in support for **one-to-one and group conversations**, developers can efficiently enable chat features within their applications. Follow this guide to **quickly integrate chat functionality** using the CometChat React UI Kit.
***
## **Prerequisites**
Before installing the **CometChat UI Kit for React**, you must first **create a CometChat application** via the **[CometChat Dashboard](https://app.cometchat.com/)**. The dashboard provides all the essential chat service components, including:
* **User Management**
* **Group Chat & Messaging**
* **Voice & Video Calling**
* **Real-time Notifications**
> To initialize the **UI Kit**, you will need the following credentials from your **CometChat application**:
>
> 1. **App ID**
> 2. **Auth Key**
> 3. **Region**
>
> Ensure you have these details ready before proceeding with the installation and configuration.
***
## **Register & Set Up CometChat**
Follow these steps to **register on CometChat** and **set up your development environment**.
### **Step 1: Register on CometChat**
To use **CometChat UI Kit**, you first need to register on the **CometChat Dashboard**.
π **[Click here to Sign Up](https://app.cometchat.com/login)**
### **Step 2: Get Your Application Keys**
After registering, create a **new app** and retrieve your **authentication details**:
1. Navigate to **Application**, then select the **Credentials** section.
2. Note down the following keys:
* **App ID**
* **Auth Key**
* **Region**
Each CometChat application can be integrated with a **single client app**. Users within the same application can communicate across multiple platforms, including **web and mobile**.
### **Step 3: Set Up Your Development Environment**
Ensure your system meets the following **prerequisites** before proceeding with integration.
**System Requirements:**
* **Node.js** installed on your machine.
* A code editor like **[Visual Studio Code](https://code.visualstudio.com/)** or **[Cursor](https://www.cursor.com/)**.
* **npm** or **Yarn** package manager installed.
***
## **Built With**
The CometChat UI Kit for React relies on the following technologies:
| Technology | Description |
| ---------------------------------------------------- | ------------------------------------- |
| [Node.js](https://nodejs.org/) | JavaScript runtime environment |
| [npm](https://www.npmjs.com/get-npm) | Node Package Manager |
| [React](https://www.npmjs.com/package/react) | JavaScript library for UI development |
| [React DOM](https://www.npmjs.com/package/react-dom) | React package for rendering UI |
***
## **Getting Started**
### **Step 1: Create a React Project**
1. **Open your code editor** (e.g., **VS Code**, **Cursor**).
2. **Initialize a new React project** using one of the following methods:
**Using Vite (Recommended)**
```
npm create vite@latest my-app --template react-ts
cd my-app
```
**Using Create React App**
```
npx create-react-app my-app --template typescript
cd my-app
```
3. **Open the project directory in your code editor**.
4. **Start developing your React components inside the src directory**.
5. **Install additional dependencies as needed**.
***
### **Step 2: Install Dependencies**
The **CometChat UI Kit for React** is an **extension** of the **CometChat JavaScript SDK**.\
Installing it will **automatically** include the core **Chat SDK**, enabling **seamless integration**.
* To install the **CometChat UI Kit**
```
npm install @cometchat/chat-uikit-react
```
```
yarn add @cometchat/chat-uikit-react
```
***
### **Step 3: Initialize CometChat UI Kit**
Before using any features of the **CometChat UI Kit** or **CometChat SDK**, you must **initialize** the required settings. This is done using the [`Init`](/ui-kit/react/methods#init) method.
* Initialization Process
Call the `Init` method at the **beginning of your application** to ensure all CometChat functionalities are properly configured.
***
**Auth Key Usage**
The **Auth Key** is an **optional property** of the `UIKitSettings` class. It is primarily recommended for **proof-of-concept (POC) development** or **early-stage application development**.
For secure authentication, use the [`Auth Token`](/ui-kit/react/methods#login-using-auth-token) method instead.
```ts theme={null}
import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react";
/**
* CometChat Constants - Replace with your actual credentials
*/
const COMETCHAT_CONSTANTS = {
APP_ID: "APP_ID", // Replace with your actual App ID from CometChat
REGION: "REGION", // Replace with your App's Region
AUTH_KEY: "AUTH_KEY", // Replace with your Auth Key (leave blank if using Auth Token)
};
/**
* Configure the CometChat UI Kit using the UIKitSettingsBuilder.
* This setup determines how the chat UI behaves.
*/
const UIKitSettings = new UIKitSettingsBuilder()
.setAppId(COMETCHAT_CONSTANTS.APP_ID) // Assign the App ID
.setRegion(COMETCHAT_CONSTANTS.REGION) // Assign the App's Region
.setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY) // Assign the Authentication Key (if applicable)
.subscribePresenceForAllUsers() // Enable real-time presence updates for all users
.build(); // Build the final configuration
/**
* Initialize the CometChat UI Kit with the configured settings.
* Once initialized successfully, you can proceed with user authentication and chat features.
*/
CometChatUIKit.init(UIKitSettings)!
.then(() => {
console.log("CometChat UI Kit initialized successfully.");
// You can now call login function to authenticate users
})
.catch((error) => {
console.error("CometChat UI Kit initialization failed:", error); // Log errors if initialization fails
});
```
```js theme={null}
import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react";
/**
* CometChat Constants - Replace with your actual credentials
*/
const COMETCHAT_CONSTANTS = {
APP_ID: "APP_ID", // Replace with your actual App ID from CometChat
REGION: "REGION", // Replace with your App's Region
AUTH_KEY: "AUTH_KEY", // Replace with your Auth Key (leave blank if using Auth Token)
};
/**
* Configure the CometChat UI Kit using the UIKitSettingsBuilder.
* This setup determines how the chat UI behaves.
*/
const UIKitSettings = new UIKitSettingsBuilder()
.setAppId(COMETCHAT_CONSTANTS.APP_ID) // Assign the App ID
.setRegion(COMETCHAT_CONSTANTS.REGION) // Assign the App's Region
.setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY) // Assign the Authentication Key (if applicable)
.subscribePresenceForAllUsers() // Enable real-time presence updates for all users
.build(); // Build the final configuration
/**
* Initialize the CometChat UI Kit with the configured settings.
* Once initialized successfully, you can proceed with user authentication and chat features.
*/
CometChatUIKit.init(UIKitSettings)
.then(() => {
console.log("CometChat UI Kit initialized successfully.");
// You can now call login function to authenticate users
})
.catch((error) => {
console.error("CometChat UI Kit initialization failed:", error); // Log errors if initialization fails
});
```
Ensure you replace the following placeholders with your actual CometChat credentials:
* APP\_ID β Your CometChat App ID
* AUTH\_KEY β Your CometChat Auth Key
* REGION β Your App Region
These values are required for proper authentication and seamless integration.
You can choose between different storage methods to store data. By default, we use local storage. To learn more about available storage options and how to configure them, [click here](/ui-kit/react/methods#setting-session-storage-mode).
***
### **Step 4: User Login**
To authenticate a user, you need a **`UID`**. You can either:
1. **Create new users** on the **[CometChat Dashboard](https://app.cometchat.com)**, **[CometChat SDK Method](/ui-kit/react/methods#create-user)** or **[via the API](https://api-explorer.cometchat.com/reference/creates-user)**.
2. **Use pre-generated test users**:
* `cometchat-uid-1`
* `cometchat-uid-2`
* `cometchat-uid-3`
* `cometchat-uid-4`
* `cometchat-uid-5`
The **Login** method returns a **User object** containing all relevant details of the logged-in user.
***
**Security Best Practices**
* The **Auth Key** method is recommended for **proof-of-concept (POC) development** and early-stage testing.
* For **production environments**, it is strongly advised to use an **[Auth Token](/ui-kit/react/methods#login-using-auth-token)** instead of an **Auth Key** to enhance security and prevent unauthorized access.
```ts theme={null}
import { CometChatUIKit } from "@cometchat/chat-uikit-react";
const UID = "UID"; // Replace with your actual UID
CometChatUIKit.getLoggedinUser().then((user: CometChat.User | null) => {
if (!user) {
// If no user is logged in, proceed with login
CometChatUIKit.login(UID)
.then((user: CometChat.User) => {
console.log("Login Successful:", { user });
// Mount your app
})
.catch(console.log);
} else {
// If user is already logged in, mount your app
}
});
```
```js theme={null}
import { CometChatUIKit } from "@cometchat/chat-uikit-react";
const UID = "UID"; // Replace with your actual UID
CometChatUIKit.getLoggedinUser().then((user) => {
if (!user) {
// If no user is logged in, proceed with login
CometChatUIKit.login(UID)
.then((user) => {
console.log("Login Successful:", { user });
// Mount your app
})
.catch(console.log);
} else {
// If user is already logged in, mount your app
}
});
```
***
### **Step 5: Choose a Chat Experience**
Integrate a conversation view that suits your application's **UX requirements**. Below are the available options:
***
#### **1οΈβ£ Conversation List + Message View**
**Best for:** Applications that need a **two-panel layout**, such as web-based chat interfaces (e.g., WhatsApp Web, Slack).
**Features:**
* **Two-panel layout** β Displays the conversation list on the left and the active chat window on the right.
* **One-to-one & group conversations** β Seamless switching between private and group chats.
* **Multiple conversations** β Effortlessly switch between different chat windows.
* **Easy navigation** β Intuitive UI for finding and accessing chats quickly.
* **Tap-to-view on mobile** β In mobile layouts, tapping a conversation opens the **Message View**, optimizing space.
* **Real-time updates** β Auto-refreshes messages and conversation lists.
* **Message sync** β Ensures messages stay updated across all sessions and devices.
**Recommended for:**
* Desktop-first applications
* Apps requiring a **rich user experience** with seamless navigation
* Platforms supporting both **individual and group messaging**
* **Mobile-friendly** apps needing a **tap-to-open message view**
[](https://link.cometchat.com/react-conversation-list-message)
> **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.
[Integrate Conversation List + Message](./react-conversation)
***
#### **2οΈβ£ One-to-One/Group Chat**
**Best for:** Apps that require a **focused, direct messaging experience** without a sidebar.
**Features:**
* **Dedicated chat window** β Ideal for one-on-one or group messaging.
* **No conversation list** β Users directly enter the chat without navigating through a list.
* **Supports both One-to-One and Group Chats** β Easily configurable with minor code modifications.
* **Optimized for mobile** β Full-screen chat experience without distractions.
* **Seamless real-time communication** β Auto-updates messages for a smooth experience.
* **Ideal for support chat or community-based messaging.**
**Recommended for:**
* **Support chat applications** β Direct user-agent communication.
* **Apps focusing on direct messaging** β No distractions from other conversations.
* **Community or group chat applications** β A structured way to interact in groups.
* **Mobile-first applications** β Designed for compact and dedicated messaging experiences.
[](https://link.cometchat.com/react-one-on-one)
> **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.
[Integrate One-to-One/Group Chat](./react-one-to-one-chat)
***
#### **3οΈβ£ Tab-Based Chat Experience**
**Best for:** Apps that need a **structured, multi-feature navigation system** for seamless interaction between **chats, calls, users, and settings**.
**Features:**
* **Tab Navigation** β Easily switch between **Chat, Call Logs, Users, and Settings**.
* **Dedicated Chat Window** β Full-screen messaging experience for focused communication.
* **No Sidebar** β Unlike multi-panel UI, this design prioritizes individual interactions.
* **Unified Experience** β Users can seamlessly manage conversations, call history, and settings from a single interface.
* **Scalable for future features** β Easily extend to include more functionalities such as notifications or contact management.
* **Optimized for both desktop and mobile** β Ensures a smooth experience across different screen sizes.
**Recommended for:**
* **Apps requiring structured navigation** β Clearly separate chat, calls, and settings.
* **Multi-feature chat apps** β Supporting different functionalities in an organized way.
* **Mobile-first applications** β Ideal for apps needing tab-based UI for easy access to features.
* **Support & enterprise chat solutions** β Perfect for help desks, business chat platforms, and customer support apps.
[](https://link.cometchat.com/react-tabs-sidebar-message)
> **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.
[Integrate Tab-Based Chat](./react-tab-based-chat)
***
## **Build Your Own Chat Experience**
**Best for:** Developers who need complete control over their chat interface, allowing customization of components, themes, and features to align with their appβs design and functionality. Whether you're enhancing an existing chat experience or building from scratch, this approach provides the flexibility to tailor every aspect to your needs.
**Recommended for:**
* Apps that require **a fully customized chat experience**.
* Developers who want to **extend functionalities and modify UI components**.
* Businesses integrating chat seamlessly into **existing platforms**.
**Key Areas to Explore:**
* **[React Sample App](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app)** β Fully functional sample applications to accelerate your development.
* **[Core Features](./core-features)** β Learn about messaging, real-time updates, and other essential capabilities.
* **[Components](./components-overview)** β Utilize prebuilt UI elements or customize them to fit your design.
* **[Themes](./theme)** β Adjust colors, fonts, and styles to match your branding.
* **[Build Your Own UI](./../../../sdk/javascript/overview)** β Prefer a custom UI over our UI Kits? Explore our SDKs to create a tailored chat experience.
***
## iFrame Support
If youβre embedding your React app inside an `
**Recommended for:**
* Desktop-first applications
* Apps requiring a **rich user experience** with seamless navigation
* Platforms supporting both **individual and group messaging**
* **Mobile-friendly** apps needing a **tap-to-open message view**
[
](https://link.cometchat.com/react-conversation-list-message)
> **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.
[Integrate Conversation List + Message](./react-conversation)
***
#### **2οΈβ£ One-to-One/Group Chat**
**Best for:** Apps that require a **focused, direct messaging experience** without a sidebar.
**Features:**
* **Dedicated chat window** β Ideal for one-on-one or group messaging.
* **No conversation list** β Users directly enter the chat without navigating through a list.
* **Supports both One-to-One and Group Chats** β Easily configurable with minor code modifications.
* **Optimized for mobile** β Full-screen chat experience without distractions.
* **Seamless real-time communication** β Auto-updates messages for a smooth experience.
* **Ideal for support chat or community-based messaging.**
**Recommended for:**
* **Support chat applications** β Direct user-agent communication.
* **Apps focusing on direct messaging** β No distractions from other conversations.
* **Community or group chat applications** β A structured way to interact in groups.
* **Mobile-first applications** β Designed for compact and dedicated messaging experiences.
[
**Recommended for:**
* **Apps requiring structured navigation** β Clearly separate chat, calls, and settings.
* **Multi-feature chat apps** β Supporting different functionalities in an organized way.
* **Mobile-first applications** β Ideal for apps needing tab-based UI for easy access to features.
* **Support & enterprise chat solutions** β Perfect for help desks, business chat platforms, and customer support apps.
[