> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-platform-agentic.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` v6.3.x                                 |
  | Peer deps    | `react` >=18, `react-dom` >=18, `rxjs` ^7.8.1                        |
  | Calling      | Optional — `@cometchat/calls-sdk-javascript`                         |
  | SSR          | Client-side only. Use `ssr: false` or `client:only="react"`          |
  | Localization | 19 languages built-in                                                |
  | Source       | [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6) |
</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-platform-agentic/qK2Pm6AuE31aKz8S/images/94312eb7-intro_web_screens-7ee27b256c54ea069273e198ec2aad4e.png?fit=max&auto=format&n=qK2Pm6AuE31aKz8S&q=85&s=34be03cf4bb90fad65ea73dd8fa02e16" width="1282" height="802" data-path="images/94312eb7-intro_web_screens-7ee27b256c54ea069273e198ec2aad4e.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

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

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

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

  <Card title="Next.js" icon={<img src="/docs/images/icons/nextjs.svg" alt="Next.js" />} href="/ui-kit/react/next-js-integration">
    App Router with client-side rendering
  </Card>

  <Card title="React Router" icon={<img src="/docs/images/icons/react-router.svg" alt="React Router" />} href="/ui-kit/react/react-router-integration">
    SPA with React Router v6+
  </Card>

  <Card title="Astro" icon={<img src="/docs/images/icons/astro.svg" alt="Astro" />} href="/ui-kit/react/astro-integration">
    React islands with client:only directive
  </Card>
</CardGroup>

***

## Explore

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

  <Card title="Features" icon="comments" href="/ui-kit/react/core-features">
    Chat, calling, AI, and extensions
  </Card>

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

  <Card title="Guides" icon="book" href="/ui-kit/react/guide-overview">
    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/v6/sample-app">
    Working reference app
  </Card>

  <Card title="Source Code" icon="code" href="https://github.com/cometchat/cometchat-uikit-react/tree/v6">
    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/upgrading-from-v5">
    Upgrading from v5
  </Card>
</CardGroup>