> ## Documentation Index
> Fetch the complete documentation index at: https://www.cometchat.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Directory Structure

> Overview of the CometChat UI Kit Builder directory layout for React Router — understand where to find and customize components, settings, and styles.

The exported UI Kit Builder code lives in `src/CometChat/`. This guide helps you navigate the structure so you know exactly where to make changes.

<Tree>
  <Tree.Folder name="src" defaultOpen>
    <Tree.Folder name="CometChat" defaultOpen>
      <Tree.Folder name="assets">
        <Tree.File name="Icons, images, audio files" />
      </Tree.Folder>

      <Tree.Folder name="components">
        <Tree.File name="React components (UI elements)" />
      </Tree.Folder>

      <Tree.Folder name="context">
        <Tree.File name="React Context providers (state management)" />
      </Tree.Folder>

      <Tree.Folder name="locales">
        <Tree.File name="Translation files (en, fr, de, etc.)" />
      </Tree.Folder>

      <Tree.Folder name="styles">
        <Tree.File name="CSS files (mirrors components structure)" />
      </Tree.Folder>

      <Tree.Folder name="utils">
        <Tree.File name="Utility functions and helpers" />
      </Tree.Folder>

      <Tree.File name="CometChatApp.tsx" />

      <Tree.File name="CometChatSettings.ts" />

      <Tree.File name="customHooks.ts" />

      <Tree.File name="decl.d.ts" />

      <Tree.File name="styleConfig.ts" />
    </Tree.Folder>

    <Tree.File name="App.tsx" />

    <Tree.File name="index.tsx" />
  </Tree.Folder>
</Tree>

***

## 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.

<Tree>
  <Tree.Folder name="components" defaultOpen>
    <Tree.Folder name="CometChatAddMembers">
      <Tree.File name="Add members to groups" />
    </Tree.Folder>

    <Tree.Folder name="CometChatBannedMembers">
      <Tree.File name="Manage banned users" />
    </Tree.Folder>

    <Tree.Folder name="CometChatCallLog">
      <Tree.File name="Call history display" />
    </Tree.Folder>

    <Tree.Folder name="CometChatCreateGroup">
      <Tree.File name="Group creation flow" />
    </Tree.Folder>

    <Tree.Folder name="CometChatDetails">
      <Tree.File name="User/group details panel" />
    </Tree.Folder>

    <Tree.Folder name="CometChatHome">
      <Tree.File name="Main chat home screen" />
    </Tree.Folder>

    <Tree.Folder name="CometChatJoinGroup">
      <Tree.File name="Join group flow" />
    </Tree.Folder>

    <Tree.Folder name="CometChatLogin">
      <Tree.File name="Login screen" />
    </Tree.Folder>

    <Tree.Folder name="CometChatMessages">
      <Tree.File name="Message list and composer" />
    </Tree.Folder>

    <Tree.Folder name="CometChatSelector">
      <Tree.File name="Conversation/user selector" />
    </Tree.Folder>

    <Tree.Folder name="CometChatTransferOwnership">
      <Tree.File name="Transfer group ownership" />
    </Tree.Folder>
  </Tree.Folder>
</Tree>

### `context/`

State management for the chat application.

<Tree>
  <Tree.Folder name="context" defaultOpen>
    <Tree.File name="AppContext.tsx" />

    <Tree.File name="CometChatContext.tsx" />

    <Tree.File name="appReducer.ts" />
  </Tree.Folder>
</Tree>

### `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>/` |

<Note>
  Prefer using settings and CSS overrides. For extensive changes, create wrapper
  components instead of modifying core files directly.
</Note>

***

## Next Steps

<CardGroup cols={2}>
  <Card title="UI Kit Builder Settings" href="/chat-builder/react-router/builder-settings">
    Configure feature toggles and behavior
  </Card>

  <Card title="Customizations" href="/chat-builder/react-router/builder-customisations">
    Modify component props, styling, and behavior
  </Card>

  <Card title="Theming" href="/ui-kit/react/theme">
    Customize colors, typography, and styling
  </Card>

  <Card title="Localization" href="/ui-kit/react/localize">
    Add multi-language support
  </Card>
</CardGroup>