Skip to main content

​
Component Categories

The CometChat React UI Kit provides pre-built components organized by functionality. Each component page includes props, events, CSS classes, and minimal examples.
For step-by-step implementation guides, see the Guides section. Component reference pages focus on API documentation.

​
Chat Components

Core components for building chat interfaces.

Conversations

List of recent conversations with last message preview

Message List

Scrollable list of messages in a conversation

Message Composer

Input field for composing and sending messages

Message Header

Header showing conversation info and actions

​
User & Group Components

Components for managing users and groups.

Users

Searchable list of users

Groups

List of groups the user belongs to

Group Members

Member list with roles and management actions

​
Calling Components

Components for voice and video calling.

Call Buttons

Voice and video call initiation buttons

Incoming Call

Incoming call notification and controls

Outgoing Call

Outgoing call UI with cancel option

Call Logs

History of voice and video calls

​
Composite Components

Pre-built layouts combining multiple components.

Conversations With Messages

Two-panel layout with conversations and messages

Messages

Complete message view with header, list, and composer

​
Utility Components

Supporting components and data structures.

Message Template

Data structure for customizing message bubbles

Thread Header

Header for threaded message views

Search

Search component for messages and users

​
Component Architecture

​
Props Categories

Each component organizes props into categories:
CategoryPurpose
RequiredProps that must be provided
DataProps that control what data is displayed
CallbacksEvent handlers for user interactions
VisibilityProps that show/hide UI elements
View SlotsCustom renderers for component sections

​
CSS Architecture

Components use CSS custom properties (design tokens) for theming: 
/* Global tokens set on .cometchat wrapper */
.cometchat {
  --cometchat-primary-color: #6852d6;
  --cometchat-background-color-01: #ffffff;
}

/* Component-specific overrides */
.cometchat-conversations {
  /* Uses var(--cometchat-primary-color) internally */
}

​
Events

Components emit events via RxJS subjects for decoupled communication: 
import { CometChatMessageEvents } from "@cometchat/chat-uikit-react";

// Subscribe to message events
CometChatMessageEvents.ccMessageSent.subscribe((data) => {
  console.log("Message sent:", data.message);
});

Getting Started

Set up the UI Kit in your project

Theming

Customize component appearance

Events

Subscribe to component events