> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-notifications-overview-redirect.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

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-notifications-overview-redirect/3rw6UXDEvUfRvOfX/images/17444f28-1623200353-cec3ee26c00789da2e9c86d68a146076.png?fit=max&auto=format&n=3rw6UXDEvUfRvOfX&q=85&s=4fec32e6146d1ca32cd635b7ce4ab507" width="2514" height="1180" data-path="images/17444f28-1623200353-cec3ee26c00789da2e9c86d68a146076.png" />
</Frame>

### 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

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-notifications-overview-redirect/hqcE7SvnsV3-uDtO/images/76dd03dc-1623200359-d64ec4a268aeeba7d00e8f1f27cdba02.png?fit=max&auto=format&n=hqcE7SvnsV3-uDtO&q=85&s=31fc59bfb721f2028994fcdef28ead91" width="1440" height="900" data-path="images/76dd03dc-1623200359-d64ec4a268aeeba7d00e8f1f27cdba02.png" />
</Frame>

<Tabs>
  <Tab title="Vue">
    ```js theme={null}
    <template>
     <div id="app">
       <CometChatUserListWithMessages />
     </div>
    </template>
    <script>
     import { CometChatUserListWithMessages } from "./cometchat-pro-vue-ui-kit/CometChatWorkspace/src";
     export default {
       name: "App",
       components: {
         CometChatUserListWithMessages,
       }
     };
    </script>
    ```
  </Tab>
</Tabs>

### 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

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-notifications-overview-redirect/zxh-c08TP_XE4gtZ/images/c8b2f64a-1623200363-4516df5d176b925ff2a8a4f375ffa390.png?fit=max&auto=format&n=zxh-c08TP_XE4gtZ&q=85&s=994574f3d62b67611c82d75c482110b2" width="1440" height="900" data-path="images/c8b2f64a-1623200363-4516df5d176b925ff2a8a4f375ffa390.png" />
</Frame>

<Tabs>
  <Tab title="Vue">
    ```js theme={null}
    <template>
     <div id="app">
       <CometChatGroupListWithMessages />
     </div>
    </template>
    <script>
     import { CometChatGroupListWithMessages } from "./cometchat-pro-vue-ui-kit/CometChatWorkspace/src";
     export default {
       name: "App",
       components: {
         CometChatGroupListWithMessages,
       }
     };
    </script>
    ```
  </Tab>
</Tabs>

### 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

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-notifications-overview-redirect/9b3FxVEuakdmVpl6/images/0396c69b-1623200368-107d08827e73dbe27f7ac75a1729a5a7.png?fit=max&auto=format&n=9b3FxVEuakdmVpl6&q=85&s=19a59c621597f7463868608daa035e47" width="1440" height="900" data-path="images/0396c69b-1623200368-107d08827e73dbe27f7ac75a1729a5a7.png" />
</Frame>

<Tabs>
  <Tab title="Vue">
    ```js theme={null}
    <template>
     <div id="app">
       <CometChatConversationListWithMessages />
     </div>
    </template>
    <script>
     import { CometChatConversationListWithMessages } from "./cometchat-pro-vue-ui-kit/CometChatWorkspace/src";
     export default {
       name: "App",
       components: {
         CometChatConversationListWithMessages,
       }
     };
    </script>
    ```
  </Tab>
</Tabs>

### CometChatMessages

The `CometChatMessages` is a component with a list of messages/chats and shows the message component header and message composer.

### 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.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-notifications-overview-redirect/cwxX4FFo1gfvzoZP/images/6902510b-1623200373-c1350bfa25fe3d944c6365bf0947051d.png?fit=max&auto=format&n=cwxX4FFo1gfvzoZP&q=85&s=0223e5dbdb9214b5586e1f7446c51634" width="1440" height="900" data-path="images/6902510b-1623200373-c1350bfa25fe3d944c6365bf0947051d.png" />
</Frame>

<Tabs>
  <Tab title="Vue">
    ```js theme={null}
    <template>
     <div id="app">
       <CometChatUserList 
            :friendsOnly=false />
     </div>
    </template>
    <script>
     import { CometChatUserList } from "./cometchat-pro-vue-ui-kit/CometChatWorkspace/src";
     export default {
       name: "App",
       components: {
         CometChatUserList,
       }
     };
    </script>
    ```
  </Tab>
</Tabs>

| Type        | Description                                                                                                         | Parameter |
| ----------- | ------------------------------------------------------------------------------------------------------------------- | --------- |
| friendsOnly | Value could be *true* or *false* This property when set to true will return only the friends of the logged-in user. | 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.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-notifications-overview-redirect/exSrA-MVZaU_-RVe/images/2a9dce96-1623200377-190de2da7e40bedd659d6a80a40977ce.png?fit=max&auto=format&n=exSrA-MVZaU_-RVe&q=85&s=6257455431654914f3e09e524999044d" width="1440" height="900" data-path="images/2a9dce96-1623200377-190de2da7e40bedd659d6a80a40977ce.png" />
</Frame>

<Tabs>
  <Tab title="Vue">
    ```js theme={null}
    <template>
     <div id="app">
       <CometChatGroupList />
     </div>
    </template>
    <script>
     import { CometChatGroupList } from "./cometchat-pro-vue-ui-kit/CometChatWorkspace/src";
     export default {
       name: "App",
       components: {
         CometChatGroupList,
       }
     };
    </script>
    ```
  </Tab>
</Tabs>

### CometChatConversationList

You can use the `CometChatConversationList` component to display the list of recent conversations that the logged-in user was a part of.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-notifications-overview-redirect/n3Dqlrv0V4ebiE27/images/25605b29-1623200380-3eb1f8932990ef683e7cd0a42eedc4da.png?fit=max&auto=format&n=n3Dqlrv0V4ebiE27&q=85&s=17b4a2156abb420f3a22341987d39c86" width="1440" height="900" data-path="images/25605b29-1623200380-3eb1f8932990ef683e7cd0a42eedc4da.png" />
</Frame>

<Tabs>
  <Tab title="Vue">
    ```js theme={null}
    <template>
     <div id=“app”>
       <CometChatConversationList />
     </div>
    </template>
    <script>
     import { CometChatConversationList } from “./cometchat-pro-vue-ui-kit/CometChatWorkspace/src”;
     export default {
       name: “App”,
       components: {
         CometChatConversationList,
       }
     };
    </script>
    ```
  </Tab>
</Tabs>