> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-013b37f0.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# UI Components

**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-013b37f0/IXQXQM27FFqKzSZd/images/17444f28-1623200353-cec3ee26c00789da2e9c86d68a146076.png?fit=max&auto=format&n=IXQXQM27FFqKzSZd&q=85&s=b7f1b889e3c8a3b2da5e4dadd79f8b0e" 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-013b37f0/WpJt6WN_K73XvFJp/images/76dd03dc-1623200359-d64ec4a268aeeba7d00e8f1f27cdba02.png?fit=max&auto=format&n=WpJt6WN_K73XvFJp&q=85&s=77ceb3e12c564b8d0b58eab1639b1810" 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-013b37f0/IdVhVuxpbq9MoHCr/images/c8b2f64a-1623200363-4516df5d176b925ff2a8a4f375ffa390.png?fit=max&auto=format&n=IdVhVuxpbq9MoHCr&q=85&s=22624add190cfad92457f0feacd89e89" 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-013b37f0/VPrNRnkEXz1B-4gC/images/0396c69b-1623200368-107d08827e73dbe27f7ac75a1729a5a7.png?fit=max&auto=format&n=VPrNRnkEXz1B-4gC&q=85&s=ccfebcddfca2939ffbc074fd074ee6de" 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-013b37f0/gwyRT6PY8hzLhEaL/images/6902510b-1623200373-c1350bfa25fe3d944c6365bf0947051d.png?fit=max&auto=format&n=gwyRT6PY8hzLhEaL&q=85&s=0e00d443bb3ce41be689a60c777c4aad" 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-013b37f0/crySXmrfj1cbCy1Q/images/2a9dce96-1623200377-190de2da7e40bedd659d6a80a40977ce.png?fit=max&auto=format&n=crySXmrfj1cbCy1Q&q=85&s=494278f4345d47c14c06bb7f7a95c8dc" 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-013b37f0/Xl0-159t64EbEbQZ/images/25605b29-1623200380-3eb1f8932990ef683e7cd0a42eedc4da.png?fit=max&auto=format&n=Xl0-159t64EbEbQZ&q=85&s=4df65a041ad0194a97559220f5cdc317" 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>