<div style="width:100%">
    <div align="center">
        <img alt="CometChat" src="https://avatars2.githubusercontent.com/u/45484907?s=200&v=4" width="180" height="180" alt="CometChat" />
    </div>
</div>
<br>
<div align="center">Full-fledged Chat UIKit built with <a href="https://react.dev/">React JS</a>. </div>
<div align="center">
  <a href="https://www.cometchat.com/docs/v4/react-uikit/overview"><strong>Explore CometChat docs »</strong></a>
</div>
<br />
<br />

##

[![Platform](https://img.shields.io/badge/Platform-React-blue?logo=react&color=%235fd3f3)](#) [![Language](https://img.shields.io/badge/Language-Typescript-blue?logo=typescript&color=%232f74c0)](#)
[![Version](https://img.shields.io/badge/Version-4-blue?color=red)](#)
<a href="https://github.com/cometchat-pro/javascript-react-chat-ui-kit/stargazers">
<img src="https://img.shields.io/github/stars/cometchat-pro/javascript-react-chat-ui-kit?style=social" />
</a>
<a href="https://twitter.com/CometChat">
<img src="https://img.shields.io/twitter/follow/CometChat?label=CometChat&style=social" />
</a>

<hr/>

## Table of contents

- [About the project](#about-the-project)
  - [Built With](#built-with)
- [Getting Started](#getting-started)
  - [Dependencies](#dependencies)
- [Versioning](#versioning)
- [Contributing](#contributing)
- [Support](#support)
- [License](#license)
- [About Authors](#about-authors)

## About the project

CometChat React JS UIKit provides pre-built user interface kit that developers can use to quickly integrate a reliable & fully featured chat experience into an existing or a new web app.<br />

### Built With

- React 18.2.0
- React DOM 18.2.0
- NPM 8.1.0
- Node 16.13.1

## Getting Started

To set up React JS Chat UIKit and utilize CometChat for your chat functionality, you'll need to follow these steps:

- Registration: Go to the [CometChat website](https://www.cometchat.com/) and sign up for an account.
- Create an App: After registering, log in to your [CometChat account](https://app.cometchat.com/login) and create a new app. Provide the necessary details such as the app name, platform (React JS), and other relevant information. Once you've created the app, CometChat will generate an Auth Key and App ID for you. You can find them under the Credentials section of your app.
- Make sure you've read the [key concepts](https://www.cometchat.com/docs/v4/react-uikit/key-concepts)
- Follow the steps provided in the integration section [here](https://www.cometchat.com/docs/v4/react-uikit/integration)

### Dependencies

To utilize the React JS Chat UIKit in your React project, you need to include the necessary dependencies in your package.json file.
<br /><br />
If your NPM version is between 3-6 please install the following dependencies via command line:

```javascript
npm i @cometchat/chat-sdk-javascript @cometchat/uikit-elements  @cometchat/uikit-resources  @cometchat/uikit-shared
```

<br />

## Versioning

- Semantic Versioning: All of the CometChat packages adhere to [semantic versioning](https://semver.org/) principles.
- Changelogs: Detailed changelogs documenting the changes, enhancements, and bug fixes made in each version can be found [here](https://www.cometchat.com/updates?category=ui%20kits)

## Contributing

Please read through our [contributing guidelines](./CONTRIBUTING.md). Included are directions for opening issues, coding standards, and notes on development.

## Support

- Facing any issues while integrating or installing the UI Kit please connect with us via real time support present in <a href="https://app.cometchat.com/signup"> CometChat Dashboard.</a>.

## License

Code released under the [MIT License](./LICENSE).

## About Authors

This project is created & maintained by: <br/>
[⚔️ @priyadarshininadar](https://github.com/priyadarshininadar) 🛡 <br>
[⚔️ @juhi-saha](https://github.com/juhi-saha) 🛡 <br>
[⚔️ @nakul-jhunjhunwala](https://github.com/nakul-cometchat) 🛡 <br>
[⚔️ @elton-lobo](https://github.com/Elton-Lobo) 🛡 <br>
[⚔️ @mayur-bhandari](https://github.com/mayur-bhandari) 🛡
