> ## Documentation Index
> Fetch the complete documentation index at: https://www.cometchat.com/docs/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 "../components/CometChatUI/CometChat/cometchat-ui.module";
```
## 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 "../components/Users/CometChat-user-list-with-messages/cometchat-user-list-with-messages.module";
```
## 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 "../components/Groups/CometChat-group-with-messages/cometchat-group-list-with-messages.module";
```
## 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 "../components/Chats/CometChat-conversation-list-with-messages/cometchat-conversation-list-with-messages.module";
```
## CometChatMessages
The `CometChatMessages` is a component with a list of messages/chats and shows the message component header and message composer.
```js theme={null}
import { CometChatMessages } from "../components/Messages/CometChat-messages/cometchat-messages.module";
```
## 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 "../components/Users/CometChat-user-list/cometchat-user-list.module";
```
| Parameter | Description | Type |
| ----------- | ------------------------------------------------------------------------------------------------------------------- | -------- |
| friendsOnly | This property when set to true will return only the friends of the logged-in user. Value could be *true* or *false* | Optional |
## 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 "../components/Groups/CometChat-group-list/cometchat-group-list.module";
```
## 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 "../components/Chats/CometChat-conversation-list/cometchat-conversation-list.module";
```