> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-agent-native-development.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-agent-native-development/BcLoqN2WGF-Pr9Oq/images/17444f28-1623200353-cec3ee26c00789da2e9c86d68a146076.png?fit=max&auto=format&n=BcLoqN2WGF-Pr9Oq&q=85&s=21076d4256da4b32cae4955a3b1c6741" width="2514" height="1180" data-path="images/17444f28-1623200353-cec3ee26c00789da2e9c86d68a146076.png" />
</Frame>

<Tabs>
  <Tab title="Vue">
    ```js theme={null}
    <template>
     <div id="app">
       <CometChatUI />
     </div>
    </template>

    <script>
     import { CometChatUI } from "./cometchat-pro-vue-ui-kit/CometChatWorkspace/src";
     export default {
       name: "App",
       components: {
         CometChatUI,
       }
     };
    </script>
    ```
  </Tab>
</Tabs>

### 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-agent-native-development/BFrez8_WLyzfZUcV/images/76dd03dc-1623200359-d64ec4a268aeeba7d00e8f1f27cdba02.png?fit=max&auto=format&n=BFrez8_WLyzfZUcV&q=85&s=a5584fe37d50d5f4604484f734cf7661" 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-agent-native-development/SkICtQbidhdDKkU0/images/c8b2f64a-1623200363-4516df5d176b925ff2a8a4f375ffa390.png?fit=max&auto=format&n=SkICtQbidhdDKkU0&q=85&s=b89a9e7ac7938b64bda60cf1fffa23c0" 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-agent-native-development/vFGkSatKDRUkHEY1/images/0396c69b-1623200368-107d08827e73dbe27f7ac75a1729a5a7.png?fit=max&auto=format&n=vFGkSatKDRUkHEY1&q=85&s=94d7f74f4cbcc9b662634a9b5450023f" 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-agent-native-development/R_bTXRyKtWjcqfzr/images/6902510b-1623200373-c1350bfa25fe3d944c6365bf0947051d.png?fit=max&auto=format&n=R_bTXRyKtWjcqfzr&q=85&s=5f7efabb41ff9717173f2aeb83d210b0" 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 `CometChatGroupListCometChatGroupList` 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-agent-native-development/xgDwSFh8m8tSmxiB/images/2a9dce96-1623200377-190de2da7e40bedd659d6a80a40977ce.png?fit=max&auto=format&n=xgDwSFh8m8tSmxiB&q=85&s=55d369d358db7d6d9c40a8badd37fc2e" 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-agent-native-development/pxaw3CU3ww5jOcRj/images/25605b29-1623200380-3eb1f8932990ef683e7cd0a42eedc4da.png?fit=max&auto=format&n=pxaw3CU3ww5jOcRj&q=85&s=f6623c9c24424a02a8a17a6135f3cca2" 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>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.