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

# React UI Kit

> Prebuilt React components for chat, voice, and video calling. Supports React.js, Next.js, React Router, and Astro.

<Accordion title="AI Integration Quick Reference">
  | Field        | Value                                                                                       |
  | ------------ | ------------------------------------------------------------------------------------------- |
  | Package      | `@cometchat/chat-uikit-react` v7.0.x                                                        |
  | Peer deps    | `react` >=18, `react-dom` >=18, `@cometchat/chat-sdk-javascript` ^4.1.9, `dompurify` ^3.3.1 |
  | Calling      | Optional — `@cometchat/calls-sdk-javascript`                                                |
  | SSR          | SSR-safe — no browser APIs at module scope. Next.js App Router compatible.                  |
  | Localization | 19 languages built-in                                                                       |
  | Source       | [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v7)                        |
</Accordion>

The CometChat React UI Kit provides prebuilt, customizable components for adding chat, voice, and video calling to any React app. Each component handles its own data fetching, real-time listeners, and state — you just drop them into your layout.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/9bgr-iIAUJixmNKk/images/two_panel_layout_without_tabs_react_v7.png?fit=max&auto=format&n=9bgr-iIAUJixmNKk&q=85&s=a9bc1857634b0c3d6451293ade1cba41" width="1440" height="800" data-path="images/two_panel_layout_without_tabs_react_v7.png" />
</Frame>

***

## Try It

<CardGroup>
  <Card title="Live Demo" icon="play" href="https://link.cometchat.com/cometchat-demo">
    Try the full chat experience in your browser
  </Card>

  <Card title="CodeSandbox" icon="code" href="https://link.cometchat.com/react-conversation-list-message">
    Fork, add your credentials, and start building
  </Card>
</CardGroup>

***

## Get Started

Pick your framework and follow the step-by-step integration guide:

<CardGroup cols={2}>
  <Card title="React.js" icon="react" href="/ui-kit/react/integration-react">
    Vite or Create React App
  </Card>

  <Card title="Next.js" icon="server" href="/ui-kit/react/integration-nextjs">
    App Router with client-side rendering
  </Card>

  <Card title="React Router" icon="route" href="/ui-kit/react/integration-react-router">
    SPA with React Router v6+
  </Card>

  <Card title="Astro" icon="rocket" href="/ui-kit/react/integration-astro">
    React islands with client:only directive
  </Card>
</CardGroup>

***

## What's Included

* **Compound components** — compose only what you need using namespace sub-components (Root, View, EmptyState, etc.)
* **Plugin system** — extensible message rendering via `CometChatMessagePlugin` interface
* **Theming** — CSS custom properties (`--cometchat-*`) with built-in light and dark themes
* **Localization** — 19 supported languages with customizable translation keys
* **Calling** — optional voice and video calling via `@cometchat/calls-sdk-javascript`
* **SSR-safe** — no browser-only APIs at module scope; Next.js App Router compatible
* **Tree-shakeable** — ESM-first build with dual ESM + CJS output

***

## Prerequisites

Before integrating the UI Kit, ensure you have:

* **Node.js 18+** installed
* A **CometChat account** with the following credentials:
  * `appId` — your CometChat application ID
  * `region` — your app region (e.g., `"us"` or `"eu"`)
  * `authKey` — your CometChat auth key (for client-side authentication)

You can find these values in the [CometChat Dashboard](https://app.cometchat.com).

### Installation

```bash theme={null}
npm install @cometchat/chat-uikit-react @cometchat/chat-sdk-javascript react react-dom dompurify
```

| Package                           | Version                            |
| --------------------------------- | ---------------------------------- |
| `@cometchat/chat-uikit-react`     | `^7.0.0`                           |
| `@cometchat/chat-sdk-javascript`  | `^4.1.9`                           |
| `react`                           | `>=18.0.0 <21.0.0`                 |
| `react-dom`                       | `>=18.0.0 <21.0.0`                 |
| `dompurify`                       | `^3.3.1`                           |
| `@cometchat/calls-sdk-javascript` | Optional — for voice/video calling |

***

## Explore

<CardGroup cols={2}>
  <Card title="Components" icon="grid-2" href="/ui-kit/react/components-overview">
    Browse all prebuilt UI components
  </Card>

  <Card title="Theming" icon="paintbrush" href="/ui-kit/react/theming">
    Colors, fonts, dark mode, and custom styling
  </Card>

  <Card title="Plugins" icon="puzzle-piece" href="/ui-kit/react/plugins/overview">
    Customize message rendering with the plugin system
  </Card>

  <Card title="Guides" icon="book" href="/ui-kit/react/guide-threaded-messages">
    Threaded messages, new chat, search, and more
  </Card>
</CardGroup>

***

## Resources

<CardGroup cols={3}>
  <Card title="Sample App" icon="github" href="https://github.com/cometchat/cometchat-uikit-react/tree/v7/sample-app">
    Working reference app
  </Card>

  <Card title="Source Code" icon="code" href="https://github.com/cometchat/cometchat-uikit-react/tree/v7">
    Full UI Kit source on GitHub
  </Card>

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

  <Card title="Troubleshooting" icon="wrench" href="/ui-kit/react/troubleshooting">
    Common issues and fixes
  </Card>

  <Card title="Support" icon="headset" href="https://help.cometchat.com/hc/en-us/requests/new">
    Open a support ticket
  </Card>

  <Card title="Migration Guide" icon="arrow-up" href="/ui-kit/react/migration-overview">
    Upgrading from v6
  </Card>
</CardGroup>