Chat UI looks like a small part of an app right up until you start shaping it to fit. You need to recompose a component, swap one region for your own, match your brand down to the fonts, and keep all of it working when you move to server-side rendering. Each of those is reasonable on its own. Together they are where chat UI work actually lives.
CometChat React UI Kit v7 is built for that part of the job.
Why does this matter to React developers?
Customizing chat UI is where the real work shows up: a custom empty state, a bubble that renders your own message type, a layout that fits your app rather than a default. v7 is built so those are configuration, not custom code you maintain forever.
Components compose from named sub-parts, so you can swap one region without forking the whole thing. Message rendering runs through plugins, so adding a custom message type is a defined interface rather than a patch. Theming is CSS custom properties, so your brand is a set of variables instead of a stylesheet you maintain against someone else's internals.
And each component handles its own data fetching, real-time listeners, and state. You drop it into your layout and move on.
Key features and capabilities
Four frameworks, one package. The same @cometchat/chat-uikit-react package covers React.js (Vite or Create React App), Next.js (App Router with client-side rendering), React Router (SPA, v6+), and Astro (React islands via the client:only directive). Each gets its own step-by-step integration guide.
Compound components.
Components are built from namespace sub-components (Root, View, EmptyState, and others), so you compose only the parts you need and replace a single region without rebuilding the component around it.
Plugin-based message rendering
Message display runs through the CometChatMessagePlugin interface. Twelve plugins ship by default, covering text, image, video, file, audio, polls, stickers, collaborative documents and whiteboards, group and call system messages, and deleted-message placeholders, with no setup. Add your own by passing them to the plugins prop on CometChatProvider.
Theming with CSS custom properties.
Colors, fonts, and dark mode are driven by --cometchat-* variables, with built-in light and dark themes you can override at the variable level.
19 languages built in.
Localization ships with 19 supported languages and customizable translation keys.
Optional voice and video calling
Add calling by installing @cometchat/calls-sdk-javascript. It is a peer dependency you opt into, not weight you carry by default.
SSR-safe and tree-shakable
No browser-only APIs at module scope, which is what lets it work cleanly with the Next.js App Router. The build is ESM-first with dual ESM and CJS output, so unused components drop out of your bundle.
What's interesting about the tech
The piece worth understanding is how messages actually get on screen. Every message in the UI is rendered by a plugin. Not most messages, every message. When the UI Kit needs to render one, it asks the plugin registry to find a match: the registry scans plugins in order and picks the first whose messageTypes includes the message's type and whose messageCategories includes its category. Deleted messages are special-cased to the Delete plugin. First match wins, so plugin order matters, and a message with no matching plugin simply is not displayed.
That last part sounds like a footnote and is not. It makes rendering a closed, predictable system rather than a pile of conditionals, and it means your custom plugins append after the defaults, so the built-ins keep priority for their own types unless you deliberately take one over. Supporting a new message type becomes implementing an interface, not hunting through render logic.
The SSR rule is the other quiet decision. Keeping browser APIs out of module scope is the difference between a kit that imports cleanly into a server component and one that throws at build time. It is the kind of constraint you only appreciate after it has cost you a weekend somewhere else.
Reference links
Overview and getting started:
Plugins
Nivedita Bharathy
Product Marketing Specialist , CometChat