React UI Kit

Learn a quick integration of text chat and voice/video calling features for your application

The CometChat React UI Kit is developed to keep developers in mind and aims to reduce development efforts significantly.


Improvements in V3.0

Faster connection & response times
Higher rate limits
Supports up to 100K users in a group
Unlimited groups
Support for Transient Messages
Real-time user & group members count
And more!

The UI Kit’s customizable UI components simplify the process of integrating text chat and voice/video calling features to your website or mobile application in a few minutes.

I want to checkout React UI Kit.

Follow the steps mentioned in the file.

Kindly, click on below button to download our React UI Kit.

React UI Kit

View on Github

I want to explore the sample app

Kindly, click on below button to download our React Sample App.

React Sample App

View on Github

Installation Steps


Before you begin, ensure you have met the following requirements:

  1. A text editor. (e.g. Visual Studio Code, Notepad++, Sublime Text, Atom, or VIM)

  2. Node

  3. npm

  4. React

npm install [email protected]
  1. React DOM
npm install [email protected]
  1. React Scripts
npm install [email protected]

Installing React UI Kit


  1. Register on CometChat
  • To install React UI Kit, you need to first register on the CometChat Dashboard. Click here to Sign Up.
  1. Get your application keys
  • Create a new app.



Please follow the steps provided in the Key concepts guide to create V3 apps before you proceed.

  • Head over to the QuickStart or API & Auth Keys section and note the App ID, Auth Key, and Region.
  1. Add the CometChat dependency
npm install @cometchat-pro/[email protected] --save

Configure CometChat inside your app

  1. Import CometChat SDK
import { CometChat } from "@cometchat-pro/chat";
  1. Initialize CometChat
    The init() method initializes the settings required for CometChat.
    We suggest calling the init() method on app startup, preferably in the created() method of the Application class.
const appID = "APP_ID";
const region = "REGION";
const appSetting = new CometChat.AppSettingsBuilder().subscribePresenceForAllUsers().setRegion(region).build();
CometChat.init(appID, appSetting).then(
  () => {
    console.log("Initialization completed successfully");
    // You can now call login function.
  error => {
    console.log("Initialization failed with error:", error);
    // Check the reason for error and take appropriate action.



Replace APP_ID and REGION with your CometChat App ID and Region in the above code.

  1. Login your user
    This method takes UID and Auth Key as input parameters and returns the User object containing all the information of the logged-in user.
const authKey = "AUTH_KEY";
const uid = "SUPERHERO1";

CometChat.login(uid, authKey).then(
  user => {
    console.log("Login Successful:", { user });    
  error => {
    console.log("Login failed with exception:", { error });    



Replace AUTH_KEY with your CometChat Auth Key in the above code.



We have set up 5 users for testing having UIDs: SUPERHERO1, SUPERHERO2, SUPERHERO3, SUPERHERO4, and SUPERHERO5.

We have used uid SUPERHERO1 as an example here. You can create a User from CometChat Dashboard as well.

Add UI Kit to your project

  • Clone this repository
git clone -b v3
  • Copy the cloned repository to your source folder
  • Copy all the dependencies from package.json into your project's package.js and install them

Launch CometChat

Using the CometChatUI component, you can launch a fully functional chat application. In this component, all the UI Screens and UI Components are interlinked and work together to launch a fully functional chat on your website/application.


import { CometChatUI } from "./CometChatWorkspace/src";

class App extends React.Component {
  render() {

    return (
      <div style={{width: '800px', height:'800px' }}>
        <CometChatUI />

Checkout our sample app

Visit our React sample app repo to run the React sample app.

Did this page help you?