React Templates & Themes Logo React Templates & Themes
Cometchat Uikit React Legacy screenshot

Cometchat Uikit React Legacy

Author Avatar Theme by Cometchat
Updated: 11 Nov 2025
92 Stars

Ready-to-use Chat UI Components for React (JavaScript/Web)

Github

Categories

Ui kits & component libraries

Overview

CometChat has introduced a major update to their UI kits, Version 4, which offers a modular architecture for enhanced flexibility in building and customizing web and mobile apps. The React UI Kit is specifically designed for text chat and voice/video calling features, aiming to reduce development efforts significantly.

Features

  • Private(1-1) & Group Conversations
  • Voice & Video Calling & Conferencing
  • Rich Media Attachments
  • Typing Indicators
  • Text, Media, and Custom Messages
  • Read Receipts
  • Online Presence Indicators
  • Message History
  • Users & Friends List
  • Search by Users and Groups
  • Groups List
  • Conversations List
  • Threaded Conversations
  • Extensions (Thumbnail Generation, Link Preview, Rich Media Preview, Smart Reply, Emojis, Polls, Reactions, Stickers)

Installation

Before you begin, make sure you have a text editor to write code in. Then, follow these steps to install the React UI Kit for CometChat:

  1. Register on CometChat Dashboard.
  2. Get your Application Keys.
    • Create a new app and note the App ID, Auth Key, and Region. Follow the steps provided in the Key Concepts guide to create V3 apps.
    • Head over to the Quick Start or API & Auth Keys section to find the necessary information.
  3. Configure CometChat inside your app.
    • Import the CometChat SDK into your project.
    • Initialize CometChat by calling the init() method, preferably in the index.js file. Replace APP_ID and REGION with your CometChat App ID and Region.
    • Use the login() method to log in your user by providing the UID and Auth Key. Replace AUTH_KEY with your CometChat Auth Key.
  4. Add the UI Kit to your project.
    • Clone the cometchat-pro-react-ui-kit repository.
    • Copy the cloned repository to your source folder.
    • Copy all the dependencies from package.json into your project’s package.json file and install them.
  5. Launch CometChat.
    • Use the CometChatUI component to launch a fully functional chat application.
    • Import the CometChatUI component and embed it in a container in your application.

Summary

CometChat has released Version 4 of their UI kits, providing developers with a modular architecture for building and customizing web and mobile apps. The React UI Kit specifically focuses on text chat and voice/video calling features, aiming to simplify the development process. With a range of features such as private and group conversations, media attachments, and online presence indicators, the UI Kit offers a comprehensive solution for incorporating chat functionality into applications. The installation process involves registering on the CometChat Dashboard, configuring the CometChat SDK, and adding the UI Kit to the project.