> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-agent-native-development.mintlify.site/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 Next.js — 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/nextjs/builder-settings">
    Configure feature toggles and behavior
  </Card>

  <Card title="Customizations" href="/chat-builder/nextjs/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>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.