Log in

React chat UI library

React chat UI components with embedded messaging logic

Production-ready UI components for building chat, calling, and AI agents into any React application. Fully wired to CometChat’s real-time infrastructure, no backend coding required.
Start free trial
Check documentation
Hero image

Chat & Messaging Components

Core components built for real-time conversations

Seamless 1:1 messaging with pre-built components that handle real-time updates, delivery, and user interaction.

Conversations

Renders the logged-in user's recent 1:1 and group conversations. Each row shows avatar, name, last message preview, timestamp, and unread count.

Message header

Renders the top bar of the message panel, consists of avatar, display name, online status, and typing indicator. Also the standard place to embed calling buttons when voice and video calling is needed.

Message List

Scrollable list of sent and received messages with text, media, reactions, read receipts, threaded replies, and AI features.

Message composer

Input bar for composing and sending messages. Supports text, media attachments, emoji, @mentions, and voice notes out of the box.

Conversations with messages

A composite component that combines Conversations, MessageHeader, MessageList, and MessageComposer into a single drop-in. Use this when you want a complete two-panel chat layout without assembling the individual pieces yourself.

Threaded messages

Opens a focused sub-conversation panel for any message, displaying the parent message and reply count at the top, with its own real-time message list and composer, allowing users to engage in threaded discussions without leaving the main conversation view.

Search

Full-text search across all conversations groups and messages. Renders matching results with context and allow users to navigate directly to the result.

Users

A searchable, scrollable list of all registered users in your app. Tap any user to open a direct chat. Used as the entry point for starting a new 1:1 conversation.

Group Chat Components

Extend into groups and communities

Create dynamic group and community experiences with components for member management, roles, and moderation.

Groups

A searchable list of all available groups the logged-in user can browse or join. Works the same way as the users component, tap a group to open the conversation.

Group members

Lists all members of a group with their assigned roles admin, moderator, or participant. Accessible from the group details panel. Admins can kick or change roles directly from this view.

Add members

Search and select UI for adding new users to an existing group. Only accessible to group administrators and owners. Selected users are added to the group and receive a notification.

Extended components

The details that make chat feel right

Add reactions, read receipts, presence indicators, and more with pre-built components that work seamlessly.

CometChat UI Kit components. Chat reactions

Reactions

Built-in emoji support with customizable reaction sets to match your app's personality.
CometChat chat UI Kit quoted replies

Threaded messages

Keep conversations organized with intuitive message threading. Users can create and follow discussion threads without losing context of the main chat.
CometChat UI Kit components. Message builder.

Message composer

Rich text editor with smart capabilities. Support for emojis, file attachments, and formatting, plus extensible for custom input types.
CometChat UI Kit components. Presence indicator.

Presence Indicators

Real-time user status updates show who's online and active. Automatic presence detection with customizable status messages.
CometChat UI Kit components. Read and delivered reciepts.

Read Receipts

Clear visual indicators show when messages are sent, delivered, and read.
CometChat UI Kit components. Message information.

Message Information

Detailed message context at a glance. Timestamps, sender info, and delivery status in a clean, customizable format.
CometChat UI Kit components, unread message count

Unread Message Counts

Smart unread counters that automatically track messages across conversations, with customizable badge styling.
CometChat UI Kit components. Audio recorder.

Audio Recorder

Built-in recording with playback controls and automatic upload handling.
CometChat UI Kit components user avatars

Avatars

Add profile pictures that adapt seamlessly from chats to user lists. Built-in support for images, initials, and presence indicators

Calling Components

Go beyond messaging with real-time voice and video

Add high-quality voice and video calling directly into your chat experience.

Call logs

Chronological call history showing incoming, outgoing, and missed calls. Each entry shows caller/callee, call type (audio or video), and timestamp. Also includes a callback button to initiate a call to the same recipient.

Ongoing call

Renders a full-window interface with video display area, mic and camera toggles, participant info, call status, and options for screen sharing and recording. Handles the full in-call lifecycle until the call ends.

Call buttons

Renders a voice and a video call button for a given user or group. Typically embedded in the message header. Manages the full call initiation flow and renders the outgoing call component internally when a call is placed.

Incoming call

Full-screen overlay shown when the logged-in user receives an incoming voice or video call. Displays caller info and presents answer and decline controls.

Outgoing call

Screen shown while the call recipient's device is ringing. Displays the callee's info and a cancel button. Automatically transitions to the ongoing call component when the call is answered.

Integration Methods

Check out more integration tools

Start with any integration method and scale to others as your needs evolve.

Widget Builder

A no-code chat builder for any platform, built for high-impact use cases that need real chat fast and flexible.

Customize entirely and toggle chat functions as needed
Integrate with a single line of code
Deploy and launch your in-app chat

UI Kit Builder

A low-code chat builder that is fully customizable, easy to integrate, and scales with your product.

Individual chat components stitched together
Customize chat and toggle functions
Export source code and deploy

Chat SDKs

Open source SDKs and APIs for all popular frameworks to build bespoke chat experiences.

Fully customizable workflows
Build your own chat interface
Extend beyond core capabilities with ease

FAQ

Got questions? We’ve got answers.

Ellipse
CometChat Logo

Start building today

Build faster, scale smarter, and elevate your chat experience with tools that grow with your business.

Schedule a demo
Start for free