All UI Kit Builder files are contained within the src/CometChat/ directory.
src/
├── CometChat/
│ ├── assets/ # Icons, images, audio files
│ ├── components/ # React components
│ ├── context/ # React Context providers
│ ├── locales/ # Translation files (en, fr, de, etc.)
│ ├── styles/ # CSS files (mirrors components structure)
│ ├── utils/ # Utility functions
│ ├── CometChatApp.tsx
│ ├── CometChatSettings.ts
│ ├── customHooks.ts
│ ├── decl.d.ts
│ └── styleConfig.ts
├── App.tsx
└── index.tsx
Root Files
| File | Description |
|---|
CometChatApp.tsx | Main entry point — import this to render the chat experience |
CometChatSettings.ts | Configuration for UI elements, features, and theming |
customHooks.ts | Custom React hooks used throughout the application |
styleConfig.ts | Global styling configuration |
Components
Each component folder contains the main .tsx file and associated hooks (use*.ts).
components/
├── CometChatAddMembers/
├── CometChatBannedMembers/
├── CometChatCallLog/
├── CometChatCreateGroup/
├── CometChatDetails/
├── CometChatHome/
├── CometChatJoinGroup/
├── CometChatLogin/
├── CometChatMessages/
├── CometChatSelector/
└── CometChatTransferOwnership/
Context
context/
├── AppContext.tsx # Main application context
├── CometChatContext.tsx # Builder settings context
└── appReducer.ts # Reducer functions
Customization Tips
| What to customize | Where to look |
|---|
| Feature toggles | CometChatSettings.ts |
| Theme colors & fonts | styleConfig.ts |
| Component-specific UI | styles/<ComponentName>/ |
| Text & translations | locales/<lang>/<lang>.json |
Prefer using settings and CSS overrides. For extensive changes, create wrapper
components instead of modifying core files directly.
Next Steps
