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

# Custom CSS

> Customize the CometChat calling UI with custom CSS classes for buttons, video containers, name labels, and grid layouts.

<Accordion title="AI Integration Quick Reference">
  ```css theme={null}
  /* Key CSS classes for call UI customization */
  .cc-main-container { }           /* Outermost call container */
  .cc-bottom-buttons-container { } /* Bottom action buttons bar */
  .cc-name-label { }               /* User name text */
  .cc-video-container { }          /* Video feed container */
  .cc-end-call-icon-container { }  /* End call button */
  .cc-audio-icon-container { }     /* Audio toggle button */
  .cc-video-icon-container { }     /* Video toggle button */
  .cc-screen-share-icon-container { } /* Screen share button */
  ```

  **Modes:** `DEFAULT` | `TILE` | `SPOTLIGHT`
</Accordion>

The CometChat calling UI exposes CSS classes you can target to style buttons, video containers, labels, and layouts. Your CSS is applied globally — any styles you write for these classes will affect the call UI across all modes (DEFAULT, TILE, SPOTLIGHT).

Before you begin, make sure you've set up [Ringing](/sdk/javascript/default-call) or [Call Session](/sdk/javascript/direct-call).

<Warning>
  Only use CSS classes documented here — targeting undocumented classes may cause UI issues. Avoid resizing the grid container to prevent layout distortions.
</Warning>

## CSS Class Reference

### Layout Containers

| Class                | Description                                   |
| -------------------- | --------------------------------------------- |
| `cc-main-container`  | Outermost container for the calling component |
| `cc-video-container` | Video feed container                          |
| `cc-name-label`      | User name text container                      |

### Action Buttons

| Class                              | Description                                                 |
| ---------------------------------- | ----------------------------------------------------------- |
| `cc-bottom-buttons-container`      | Bottom bar containing action buttons (mute, end call, etc.) |
| `cc-bottom-buttons-icon-container` | Individual button wrapper                                   |
| `cc-audio-icon-container`          | Audio toggle button                                         |
| `cc-audio-icon-container-muted`    | Audio button (muted state)                                  |
| `cc-video-icon-container`          | Video toggle button                                         |
| `cc-video-icon-container-muted`    | Video button (muted state)                                  |
| `cc-screen-share-icon-container`   | Screen share button                                         |
| `cc-switch-video-icon-container`   | Switch camera button                                        |
| `cc-end-call-icon-container`       | End call button                                             |

## Examples

### Basic Styling

This example applies colored backgrounds to buttons and dotted borders to containers to visualize the layout structure:

<Tabs>
  <Tab title="CSS">
    ```css theme={null}
    .cc-end-call-icon-container {
      background-color: green;
    }
    .cc-audio-icon-container {
      background-color: blue;
    }
    .cc-video-icon-container {
      background-color: blue;
    }
    .cc-audio-icon-container-muted {
      background-color: orange;
    }
    .cc-video-icon-container-muted {
      background-color: orange;
    }
    .cc-switch-video-icon-container {
      background-color: blue;
    }
    .cc-screen-share-icon-container {
      background-color: blue;
    }
    .cc-main-container {
      border: 2px dotted white;
    }
    .cc-video-container {
      border: 2px dotted orange;
    }
    .cc-bottom-buttons-container {
      border: 2px dotted red;
    }
    .cc-name-label {
      border: 2px dotted green;
    }
    ```
  </Tab>
</Tabs>

Here's how it looks across the three call modes:

**Mode: `DEFAULT`**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-v6-beta2-flutter-uikit/g17zegx-VcA6lulj/images/40079cb9-0wq9o8e3el3e41hs1575xiyhybemns1inp3nv4fzji09chlmzwcxe0x2z4k5tz32-a9e4201d93916dda23b05ab5bfddf1bf.png?fit=max&auto=format&n=g17zegx-VcA6lulj&q=85&s=4d98bec0991f8a8bac94fcbd6f5274f2" width="2560" height="1440" data-path="images/40079cb9-0wq9o8e3el3e41hs1575xiyhybemns1inp3nv4fzji09chlmzwcxe0x2z4k5tz32-a9e4201d93916dda23b05ab5bfddf1bf.png" />
</Frame>

**Mode: `TILE`**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-v6-beta2-flutter-uikit/e0Ylj4tzwVQ2-pAf/images/07530757-88nhrrr1z95e78wy4t0k4pz8c9zcaxhphmrv0db07w4g2eqmf8haza2lb2kyfnb1-590d2ccb6836274ba955bba8f8181308.png?fit=max&auto=format&n=e0Ylj4tzwVQ2-pAf&q=85&s=29ab738220a75a2599c8e844ce4ba43b" width="2560" height="1440" data-path="images/07530757-88nhrrr1z95e78wy4t0k4pz8c9zcaxhphmrv0db07w4g2eqmf8haza2lb2kyfnb1-590d2ccb6836274ba955bba8f8181308.png" />
</Frame>

**Mode: `SPOTLIGHT`**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-v6-beta2-flutter-uikit/LiXEEp9Qsl0d-j_B/images/0ccea4cb-ivplmg27823qlaxthfhug5ihcebjfzif5dobx2pdl3x07x9qu18ai3fu98tz0t6u-82de98478427a58dcb9441afdd54f1a7.png?fit=max&auto=format&n=LiXEEp9Qsl0d-j_B&q=85&s=7d086afc937079b3b528fc63fa02daf9" width="2560" height="1440" data-path="images/0ccea4cb-ivplmg27823qlaxthfhug5ihcebjfzif5dobx2pdl3x07x9qu18ai3fu98tz0t6u-82de98478427a58dcb9441afdd54f1a7.png" />
</Frame>

<Tabs>
  <Tab title="CSS">
    ```css theme={null}
    .cc-bottom-buttons-icon-container {
      height: 50px !important;
      width: 50px !important;
    }

    .cc-audio-icon-container {
      background-color: #0073ff !important;
      border-radius: 4px !important;
    }

    .cc-video-icon-container {
      background-color: #0073ff !important;
      border-radius: 4px !important;
    }

    .cc-screen-share-icon-container {
      background-color: #0073ff !important;
      border-radius: 4px !important;
    }

    .cc-end-call-icon-container {
      background-color: #ab0090 !important;
      border-radius: 4px !important;
      margin-left: 50px !important;
    }

    .cc-bottom-buttons.cc-bottom-buttons-container {
      gap: 25px !important;
    }

    .side-bar-main-user-video video {
      background-color: black !important;
      background-image: repeating-conic-gradient(
        #0073ff2a 0% 25%,
        #00000031 0% 50%
      ) !important;
      background-position: 0 0, 10px 10px !important;
      background-size: 20px 20px !important;
    }

    .cc-name-label {
      background-color: #0073ff !important;
    }

    .bottom-buttons-other-options {
      gap: 20px !important;
    }
    ```
  </Tab>
</Tabs>

### Polished UI

This example shows a more refined customization with rounded buttons, custom spacing, and a patterned video background:

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-v6-beta2-flutter-uikit/oQzXdHfclcei7Uj5/images/97410b02-98nyrur1z95e78wy4t0k4pz8c9zcbyhyimrv0db07w4g2eqmf8haza2lb2kyfnb1-458156083bf242abfa2ee89a0cf795fb.png?fit=max&auto=format&n=oQzXdHfclcei7Uj5&q=85&s=15e82533a28dc01d11a6e6663ce41732" width="1508" height="945" data-path="images/97410b02-98nyrur1z95e78wy4t0k4pz8c9zcbyhyimrv0db07w4g2eqmf8haza2lb2kyfnb1-458156083bf242abfa2ee89a0cf795fb.png" />
</Frame>

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Video View Customization" icon="sliders" href="/sdk/javascript/video-view-customisation">
    Customize video call layout and participant tiles
  </Card>

  <Card title="Virtual Background" icon="image" href="/sdk/javascript/virtual-background">
    Apply blur or custom image backgrounds during calls
  </Card>

  <Card title="Calling Overview" icon="phone" href="/sdk/javascript/calling-overview">
    Overview of all calling features and approaches
  </Card>
</CardGroup>