src/CometChat/. This guide helps you navigate the structure so you know exactly where to make changes.
src
CometChat
assets
components
context
locales
styles
utils
CometChatApp.tsx
CometChatSettings.ts
customHooks.ts
decl.d.ts
styleConfig.ts
App.tsx
index.tsx
Root Files
| File | Purpose |
|---|---|
CometChatApp.tsx | Main entry point — import this to render the chat experience |
CometChatSettings.ts | Toggle features on/off (messaging, calls, AI copilot, etc.) |
customHooks.ts | Custom React hooks used throughout the application |
styleConfig.ts | Global styling configuration (colors, fonts, spacing) |
Key Folders
components/
Each component folder contains the main .tsx file and associated hooks (use*.ts). These are the building blocks of your chat UI.
components
CometChatAddMembers
CometChatBannedMembers
CometChatCallLog
CometChatCreateGroup
CometChatDetails
CometChatHome
CometChatJoinGroup
CometChatLogin
CometChatMessages
CometChatSelector
CometChatTransferOwnership
context/
State management for the chat application.
context
AppContext.tsx
CometChatContext.tsx
appReducer.ts
styles/
CSS files organized to mirror the components structure. Each component has a corresponding style folder.
locales/
Translation files for multi-language support. Add or modify JSON files here to customize text.
Quick Reference: Where to Customize
| What you want to change | Where to look |
|---|---|
| Enable/disable features | CometChatSettings.ts |
| Theme colors & fonts | styleConfig.ts |
| Component-specific CSS | styles/<ComponentName>/ |
| Text & translations | locales/<lang>/<lang>.json |
| Component behavior | components/<ComponentName>/ |
Prefer using settings and CSS overrides. For extensive changes, create wrapper
components instead of modifying core files directly.
Next Steps
UI Kit Builder Settings
Configure feature toggles and behavior
Customizations
Modify component props, styling, and behavior
Theming
Customize colors, typography, and styling
Localization
Add multi-language support