> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# CometChat Builder For React

The **CometChat Builder** for React is a powerful solution designed to seamlessly integrate chat functionality into applications. It provides a robust set of **prebuilt UI components** that are **modular, customizable, and highly scalable**, allowing developers to accelerate their development process with minimal effort.

***

## **Why Choose CometChat Builder?**

* **Rapid Integration** – Prebuilt UI components for faster deployment.
* **Customizable & Flexible** – Modify the UI to align with your brand’s identity.
* **Cross-Platform Compatibility** – Works seamlessly across various React-based frameworks.
* **Scalable & Reliable** – Built on CometChat's **robust chat infrastructure** for enterprise-grade performance.

***

## **User Interface Preview**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/bhTrlIxYu6hfTewG/images/42d014ac-visual_chat_builder-3270b27870aa7586ed5b34d489b18e0b.png?fit=max&auto=format&n=bhTrlIxYu6hfTewG&q=85&s=4360b841f86c408d334f2efe5ab03f27" width="1294" height="710" data-path="images/42d014ac-visual_chat_builder-3270b27870aa7586ed5b34d489b18e0b.png" />
</Frame>

***

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

***

## **Integration**

A ready-to-use chat interface—configured via a UI Kit Builder—built on top of our UI Kits.

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

**How It Works**

* Toggle features like @mentions, reactions, media uploads, and more in a visual interface.
* Drag-and-drop or point-and-click to enable or disable components.
* Customize layouts and styles—no deep coding required.

**Why It’s Great**

* **Fastest Setup** – Minimal component wiring.
* **Continuous Customization** – Only turn on the features you want.
* **Fewer Moving Parts** – Reliable, pre-assembled UI that’s easy to maintain.

***

## **Next Steps for Developers**

1. **Learn the Basics** – [Key Concepts](/fundamentals/key-concepts).

2. **Follow the Setup Guide** –

   * **UI Kit Builder** – [React.js](/ui-kit/react/builder-integration)

3. **Customize UI** – Adjust [styles, themes](/ui-kit/react/theme), and [components](/ui-kit/react/components-overview).

4. **Test & Deploy** – Run tests and launch your chat app.

***

## **Helpful Resources**

Explore these essential resources to gain a deeper understanding of **CometChat UI Kits** and streamline your integration process.

<CardGroup>
  <Card title="React Sample App" href="https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app">
    Fully functional sample applications to accelerate your development.

    View on GitHub
  </Card>

  <Card title="UI Kit Source Code" href="https://github.com/cometchat/cometchat-uikit-react/tree/v6">
    Access the complete UI Kit source code on GitHub.

    View on GitHub
  </Card>

  <Card title="Figma Design File" href="https://www.figma.com/community/file/1442863561340379957/cometchat-ui-kit-for-web">
    UI design resources for customization and prototyping.

    View on Figma
  </Card>
</CardGroup>

***

## **Need Help?**

If you need assistance, check out:

* [Developer Community](http://community.cometchat.com/)
* [Support Portal](https://help.cometchat.com/hc/en-us/requests/new)