> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-react-ui-kit-plugin-precedence.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# UI Components
> UI Components — CometChat documentation.
**UI Components** are building blocks of the UI Kit. **UI Components** are a set of custom classes specially designed to build a rich chat app. There are different UI Components available in the UI Kit Library.
### CometChatUI
**CometChatUI** is an option to launch a fully functional chat application using the UI Kit. In **CometChatUI** all the **UI Components** are interlinked and work together to launch a fully functional chat on your website/application.
```js theme={null}
import { CometChatUI } from "./cometchat-pro-react-ui-kit/CometChatWorkspace/src";
class App extends React.Component {
render() {
return (
);
}
}
```
It takes the following properties:
| Parameter | Description | Type |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------ | -------- |
| chatWithUser | The ID of the user you want to chat with | Optional |
| chatWithGroup | The ID of the group you want to chat with | Optional |
| friendsOnly | Value could be *true* or *false* This property when set to true will return only the friends of the logged-in user in the users tab. | Optional |
*friendsOnly* prop is deprecated from version **v3.0.0-beta5-1**. Please use **userListMode** variable\
[Customize UI Kit](/ui-kit/react/v3/customize)
### CometChatUserListWithMessages
The `CometChatUserListWithMessages` is a component with a list of users. The component has all the necessary listeners and methods required to display the user's list and shows the set of the messages/chats of the selected user.
```js theme={null}
import { CometChatUserListWithMessages } from "./cometchat-pro-react-ui-kit/CometChatWorkspace/src";
class App extends React.Component {
render() {
return (
);
}
}
```
It takes the following properties:
| Parameter | Description | Type |
| ------------ | ------------------------------------------------------------------------------------------------------------------- | -------- |
| chatWithUser | The ID of the user you want to chat with | Optional |
| friendsOnly | Value could be *true* or *false* This property when set to true will return only the friends of the logged-in user. | Optional |
*friendsOnly* prop is deprecated from version **v3.0.0-beta5-1**. Please use **userListMode** variable of UIKitSettings class for displaying only friends in the user list.\
Please refer to this link for documentation: [Customize UI Kit](/ui-kit/react/v3/customize)
### CometChatGroupListWithMessages
The `CometChatGroupListWithMessages` is a component with a list of groups. The component has all the necessary listeners and methods required to display the group's list and shows the set of the messages/chats of the selected group.
```js theme={null}
import { CometChatGroupListWithMessages } from "./cometchat-pro-react-ui-kit/CometChatWorkspace/src";
class App extends React.Component {
render() {
return (
);
}
}
```
It takes the following properties:
| Parameter | Description | Type |
| ------------- | ----------------------------------------- | -------- |
| chatWithGroup | The ID of the group you want to chat with | Optional |
### CometChatConversationListWithMessages
The `CometChatConversationListWithMessages` is a component with a list of recent conversations. The component has all the necessary listeners and methods required to display the recent conversation list and shows the set of the messages/chats of the selected recent conversation
```js theme={null}
import { CometChatConversationListWithMessages } from "./cometchat-pro-react-ui-kit/CometChatWorkspace/src";
class App extends React.Component {
render() {
return (
);
}
}
```
It takes the following properties:
| Parameter | Description | Type |
| ------------- | ----------------------------------------- | -------- |
| chatWithUser | The ID of the user you want to chat with | Optional |
| chatWithGroup | The ID of the group you want to chat with | Optional |
### CometChatMessages
The `CometChatMessages` is a component that displays the list of messages for a particular user or group.
```js theme={null}
import { CometChatMessages } from "./cometchat-pro-react-ui-kit/CometChatWorkspace/src";
class App extends React.Component {
render() {
return (
);
}
}
```
It takes the following properties:
| Parameter | Description | Type |
| ------------- | ----------------------------------------- | -------- |
| chatWithUser | The ID of the user you want to chat with | Required |
| chatWithGroup | The ID of the group you want to chat with | Optional |
### CometChatUserList
The `CometChatUserList` is a component that displays the list of users available to chat. You can use this component within your app if you wish to display the list of users.
```js theme={null}
import { CometChatUserList } from "./cometchat-pro-react-ui-kit/CometChatWorkspace/src";
class App extends React.Component {
render() {
return (
);
}
}
```
It takes the following props:
| Parameter | Description | Type |
| ----------- | -------------------------------------------------------------------------------------------------------------------- | -------- |
| friendsOnly | Value could be *true* or *false.* This property when set to true will return only the friends of the logged-in user. | Optional |
*friendsOnly* prop is deprecated from version **v3.0.0-beta5-1**. Please use **userListMode** variable of UIKitSettings class for displaying only friends in the user list. Please refer to this link for documentation: [Customize UI Kit](/ui-kit/react/v3/customize)
### CometChatGroupList
The `CometChatGroupList` is a component that displays the list of groups available. You can use this component within your app if you wish to display the list of groups.
```js theme={null}
import { CometChatGroupList } from "./cometchat-pro-react-ui-kit/CometChatWorkspace/src";
class App extends React.Component {
render() {
return (
);
}
}
```
### CometChatConversationList
You can use the `CometChatConversationList` component to display the list of recent conversations that the logged-in user was a part of.
```js theme={null}
import { CometChatConversationList } from "./cometchat-pro-react-ui-kit/CometChatWorkspace/src";
class App extends React.Component {
render() {
return (
);
}
}
```