> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# CometChat UI Kit Builder Directory Structure

> CometChat UI Kit Builder Directory Structure — CometChat documentation.

This document provides an overview of the CometChat UI Kit Builder directory structure, helping you understand the organization of the project and where to find specific files when you need to customize or extend functionality.

## Overview

The CometChat UI Kit Builder follows a modular structure organized by feature and functionality. All UI Kit Builder files are contained within the `src/CometChat/` directory.

```
src/
├── CometChat/
│   ├── assets/
│   ├── components/
│   ├── context/
│   ├── locales/
│   ├── styles/
│   ├── utils/
│   ├── CometChatApp.tsx
│   ├── CometChatSettings.ts
│   ├── customHooks.ts
│   ├── decl.d.ts
│   └── styleConfig.ts
├── App.css
├── App.tsx
└── index.tsx
```

## Directory Details

### Root Files

| File                   | Description                                                                                                                              |
| ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| `CometChatApp.tsx`     | The main entry point for the UI Kit Builder application. This is the component you import in your project to render the chat experience. |
| `CometChatSettings.ts` | Contains configuration settings for the UI Kit Builder, including UI elements, features, and theming options.                            |
| `customHooks.ts`       | Custom React hooks used throughout the application.                                                                                      |
| `decl.d.ts`            | TypeScript declaration file for type definitions.                                                                                        |
| `styleConfig.ts`       | Configuration file for styling across the application.                                                                                   |

### Key Directories

#### `assets/`

Contains UI resources like icons, images, and audio files used throughout the application.

```
assets/
│   ├── chats.svg
│   ├── calls.svg
│   ├── users.svg
│   ├── groups.svg
│   └── (Other UI icons and images)
```

#### `components/`

Contains all React components that make up the UI of the UI Kit Builder.

```
components/
├── CometChatAddMembers/
│   ├── CometChatAddMembers.tsx
│   └── useCometChatAddMembers.ts
├── CometChatAlertPopup/
│   └── CometChatAlertPopup.tsx
├── CometChatBannedMembers/
│   └── CometChatBannedMembers.tsx
├── CometChatCallLog/
│   ├── CometChatCallLogDetails.tsx
│   ├── CometChatCallLogHistory.tsx
│   ├── CometChatCallLogInfo.tsx
│   ├── CometChatCallLogParticipants.tsx
│   └── CometChatCallLogRecordings.tsx
├── CometChatCreateGroup/
│   └── CometChatCreateGroup.tsx
├── CometChatDetails/
│   ├── CometChatThreadedMessages.tsx
│   └── CometChatUserDetails.tsx
├── CometChatHome/
│   └── CometChatHome.tsx
├── CometChatJoinGroup/
│   └── CometChatJoinGroup.tsx
├── CometChatLogin/
│   ├── CometChatAppCredentials.tsx
│   ├── CometChatLogin.tsx
│   └── sampledata.ts
├── CometChatMessages/
│   ├── CometChatEmptyStateView.tsx
│   └── CometChatMessages.tsx
├── CometChatSelector/
│   ├── CometChatSelector.tsx
│   └── CometChatTabs.tsx
└── CometChatTransferOwnership/
    ├── CometChatTransferOwnership.tsx
    └── useCometChatTransferOwnership.ts
```

Each component folder typically contains:

* The main component file (`.tsx`)
* Associated hook files (`use*.ts`) for component logic
* Subcomponents specific to that feature area

#### `context/`

Contains React Context providers used for state management across the application.

```python theme={null}
context/
├── AppContext.tsx        # Main application context
├── CometChatContext.tsx  # Context for builder settings
└── appReducer.ts         # Reducer functions for AppContext
```

#### `locales/`

Contains translations for different languages, enabling localization of the UI.

```bash theme={null}
locales/ (Contains translations for different languages)
├── en/en.json
├── fr/fr.json
├── de/de.json
└── (Other language JSON files)
```

#### `styles/`

Contains CSS files for styling components, organized to mirror the components directory structure.

```
styles/
├── CometChatAddMembers/
│   └── CometChatAddMembers.css
├── CometChatAlertPopup/
│   └── CometChatAlertPopup.css
├── CometChatBannedMembers/
│   └── CometChatBannedMembers.css
├── CometChatCallLog/
│   ├── CometChatCallLogDetails.css
│   ├── CometChatCallLogHistory.css
│   ├── CometChatCallLogInfo.css
│   ├── CometChatCallLogParticipants.css
│   └── CometChatCallLogRecordings.css
├── CometChatCreateGroup/
│   └── CometChatCreateGroup.css
├── CometChatDetails/
│   ├── CometChatDetails.css
│   ├── CometChatThreadedMessages.css
│   └── CometChatUserDetails.css
├── CometChatLogin/
│   ├── CometChatAppCredentials.css
│   └── CometChatLogin.css
├── CometChatMessages/
│   ├── CometChatEmptyStateView.css
│   └── CometChatMessages.css
├── CometChatNewChat/
│   └── CometChatNewChatView.css
├── CometChatSelector/
│   ├── CometChatSelector.css
│   └── CometChatTabs.css
├── CometChatTransferOwnership/
│   └── CometChatTransferOwnership.css
└── CometChatApp.css
```

#### `utils/`

Contains utility functions and helpers used across the application.

```python theme={null}
utils/
└── utils.ts  # General utility functions
```

## Key Components Overview

* **CometChatHome**: Main dashboard component that serves as the entry point for the chat experience
* **CometChatMessages**: Core component for displaying and managing chat messages
* **CometChatCallLog**: Components for call history and details
* **CometChatDetails**: User and group details and settings
* **CometChatLogin**: Authentication-related components
* **CometChatSelector/CometChatTabs**: Navigation and tab-based interface components

## Customization Points

When customizing the UI Kit Builder, you'll typically work with:

1. **`CometChatSettings.ts`**: To modify high-level configuration
2. **`styleConfig.ts`**: To change theme colors, fonts, and other styling variables
3. **Component styles**: To make specific UI adjustments to individual components
4. **Locale files**: To modify text strings or add new language support

## Recommendations for Modifications

* Avoid direct modification of core components when possible
* Use the settings files for configuration changes
* Use CSS overrides for styling customizations
* For extensive customizations, consider creating wrapper components that use the UI Kit Builder components as children

***

## **Conclusion**

This structured breakdown of the **CometChat UI Kit Builder directory** helps developers understand the project layout, making it easier to navigate, extend, and customize as needed.

For further customization and integration details, refer to:

* **[Builder Configuration File](/ui-kit/react/v6/builder-settings)** – Learn how to customize your integration.
* **[Advanced Theming](/ui-kit/react/v6/theme)** – Modify themes and UI elements to match your brand.