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

# CometChat UI Kit Builder For Next.js

> CometChat UI Kit Builder for Next.js is a low-code development tool to design and configure fully-featured chat experiences.

It provides a set of prebuilt, production-ready messaging components backed by CometChat's real-time infrastructure.

With CometChat UI Kit Builder, you can:

* **Configure chat and calling features**
* **Apply theming and layout options**
* **Export Next.js-ready code**

The exported UI connects to CometChat's SDK and infrastructure, which manages message transport, sync, and backend scaling.

## What You Can Configure

Toggle these features on or off directly in the UI Kit Builder. For a full reference of each setting, see [UI Kit Builder Settings](/chat-builder/nextjs/builder-settings).

### Chat Features

| Category                            | Includes                                                                                                                                               |
| ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Core Messaging Experience**       | Typing indicators, threads, media sharing (photos, video, audio, files), edit & delete messages, read receipts, search, quoted replies, mark as unread |
| **Deeper User Engagement**          | Mentions, @all mentions, reactions, message translation, polls, collaborative whiteboard & document, voice notes, emojis, stickers, user & group info  |
| **AI User Copilot**                 | Conversation starters, conversation summaries, smart replies                                                                                           |
| **User Management**                 | Friends-only mode                                                                                                                                      |
| **Group Management**                | Create groups, add members, join/leave, delete groups, view members                                                                                    |
| **Moderation**                      | Content moderation, report messages, kick/ban users, promote/demote members                                                                            |
| **Private Messaging Within Groups** | Direct messages between group members                                                                                                                  |
| **In-App Sounds**                   | Incoming & outgoing message sounds                                                                                                                     |

### Call Features

| Category                  | Includes                                                                             |
| ------------------------- | ------------------------------------------------------------------------------------ |
| **Voice & Video Calling** | 1:1 voice calling, 1:1 video calling, group voice conference, group video conference |

### Layout

| Category    | Includes                                |
| ----------- | --------------------------------------- |
| **Sidebar** | With Sidebar or Without Sidebar mode    |
| **Tabs**    | Conversations, Call Logs, Users, Groups |

### Theming

| Category       | Includes                                                    |
| -------------- | ----------------------------------------------------------- |
| **Theme**      | System, Light, or Dark mode                                 |
| **Colors**     | Brand color, primary & secondary text colors (light & dark) |
| **Typography** | Font family, text sizing (default, compact, comfortable)    |

***

## How to Use UI Kit Builder

### 1. Design

Configure your chat layout, toggle features, and pick a theme using the UI Kit Builder.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/dJPACx1AKXUTpAHt/images/uikit-builder-preview.png?fit=max&auto=format&n=dJPACx1AKXUTpAHt&q=85&s=8a801797bb6c3c9af164502d41708a4a" width="2880" height="1624" data-path="images/uikit-builder-preview.png" />
</Frame>

### 2. Export

Click **Export Code** to generate a production-ready Next.js codebase based on your configuration.

### 3. Integrate

Drop the exported code into your Next.js project, add your CometChat credentials, and run the app. See the [Integration Guide](/chat-builder/nextjs/integration) for full steps.

***

## Try Live Demo

Experience the CometChat UI Kit Builder in action:

<CardGroup>
  <Card title="Launch Live Demo" icon="play" href="https://preview.cometchat.com/" />
</CardGroup>

or follow the video walkthrough below:

<Frame>
  <iframe width="100%" height="400" src="https://www.youtube.com/embed/0mmX_3Ohnz8" title="YouTube video" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" />
</Frame>