CometChat UI Kit For React

Prebuilt, customizable React UI components for adding chat, voice, and video calling to your app. Supports React.js, Next.js, React Router, and Astro.

AI Agent Component Spec

• Package: @cometchat/chat-uikit-react
• Install: npm install @cometchat/chat-uikit-react
• Required setup: CometChatUIKit.init(UIKitSettings) then CometChatUIKit.login("UID") — must complete before rendering any component
• Key components: CometChatConversations, CometChatMessageList, CometChatMessageComposer, CometChatMessageHeader, CometChatUsers, CometChatGroups
• Theming: Override CSS variables on .cometchat class. See Theming
• Calling: Requires separate @cometchat/calls-sdk-javascript package. See Call Features
• SSR: Components require browser APIs — use client-side only rendering for Next.js/Astro

The CometChat UI Kit for React provides prebuilt, modular UI components for in-app chat, voice, and video calling. Components are customizable via CSS variables and support light/dark theming.

---

User Interface Preview

---

Try Live Demo

Launch Live Demo

Edit in CodeSandbox

---

Integration

Individual components — conversation lists, message lists, message composer, etc. — each with built-in chat logic. Import, arrange in a layout, and apply styling as needed.

React

Next.js

React Router

Astro

---

Helpful Resources

React Sample App

Fully functional sample application.

UI Kit Source Code

Complete UI Kit source on GitHub.

Figma Design File

UI design resources for customization and prototyping.

---

Need Help?

• Support Portal

---

Next Steps

React.js Integration

Step-by-step setup for React.js applications

Components Overview

Browse all available prebuilt UI components

Core Features

Chat features included out of the box

Theming

Customize colors, fonts, and styles