Skip to main content
FieldValue
Package@cometchat/chat-uikit-react
FrameworkReact Router
ComponentsCometChatConversations, CometChatMessageHeader, CometChatMessageList, CometChatMessageComposer
LayoutTwo-panel — conversation list (left) + message view (right)
PrerequisiteComplete React Router Integration first
SSRN/A — client-side SPA by default
PatternWhatsApp Web, Slack, Microsoft Teams
This guide builds a two-panel chat layout — conversation list on the left, messages on the right. Users click a conversation to open it. This assumes you’ve already completed React Router Integration (project created, UI Kit installed, init + login working).

​
What You’re Building

Three sections working together:
  1. Sidebar (conversation list) — shows all active conversations (users and groups)
  2. Message view — displays chat messages for the selected conversation in real time
  3. Message composer — text input with support for media, emojis, and reactions

​
Full Code

Create a chat route component. This assumes init() and login() already happen in src/main.tsx (as shown in the integration guide).
src/pages/ChatPage.tsx
import { useState } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
  CometChatProvider,
  CometChatConversations,
  CometChatMessageHeader,
  CometChatMessageList,
  CometChatMessageComposer,
} from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/styles";
import "./ChatPage.css";

export default function ChatPage() {
  const [selectedUser, setSelectedUser] = useState<CometChat.User | undefined>(undefined);
  const [selectedGroup, setSelectedGroup] = useState<CometChat.Group | undefined>(undefined);

  const handleConversationClick = (conversation: CometChat.Conversation) => {
    const entity = conversation.getConversationWith();
    if (conversation.getConversationType() === "user") {
      setSelectedUser(entity as CometChat.User);
      setSelectedGroup(undefined);
    } else {
      setSelectedGroup(entity as CometChat.Group);
      setSelectedUser(undefined);
    }
  };

  return (
    <CometChatProvider>
      <div className="conversations-with-messages">
        <div className="conversations-wrapper">
          <CometChatConversations onItemClick={handleConversationClick} />
        </div>

        {selectedUser || selectedGroup ? (
          <div className="messages-wrapper">
            <CometChatMessageHeader user={selectedUser} group={selectedGroup} />
            <CometChatMessageList user={selectedUser} group={selectedGroup} />
            <CometChatMessageComposer user={selectedUser} group={selectedGroup} />
          </div>
        ) : (
          <div className="empty-conversation">
            Select a conversation to start chatting
          </div>
        )}
      </div>
    </CometChatProvider>
  );
}
src/pages/ChatPage.css
.conversations-with-messages {
  display: flex;
  height: 100vh;
  width: 100%;
}

.conversations-wrapper {
  width: 360px;
  height: 100%;
  border-right: 1px solid #eee;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.messages-wrapper {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.empty-conversation {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--cometchat-background-color-03, #f5f5f5);
  color: var(--cometchat-text-color-secondary, #727272);
  font: var(--cometchat-font-body-regular, 400 14px Roboto);
}
Register the route in your App.tsx:
src/App.tsx
import { Routes, Route, Navigate } from "react-router-dom";
import ChatPage from "./pages/ChatPage";

function App() {
  // ... login logic from integration guide ...

  return (
    <Routes>
      <Route path="/chat" element={<ChatPage />} />
      <Route path="*" element={<Navigate to="/chat" replace />} />
    </Routes>
  );
}

export default App;

​
How It Works

  1. CometChatProvider wraps the entire tree — it supplies theme, locale, and event context to all CometChat components.
  2. CometChatConversations renders the sidebar list. When a user clicks a conversation, onItemClick fires with the Conversation object.
  3. handleConversationClick extracts the User or Group from the conversation and stores it in state.
  4. Message components (MessageHeader, MessageList, MessageComposer) receive either user or group as a prop — never both at the same time.
  5. When the user switches conversations, state updates and the message panel re-renders with the new chat.
  6. React Router handles navigation — the chat page is a route component at /chat.

​
Run

npm run dev
Open http://localhost:5173/chat. You should see the conversation list on the left. Click any conversation to load messages on the right.

​
Next Steps

One-to-One / Group Chat

Single chat window without a sidebar

Tab-Based Chat

Tabbed navigation with Chats, Calls, Users

Components Overview

Browse all prebuilt UI components

Theming

Customize colors, fonts, and styles