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

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/t35Dbaum6Rkuz_d5/images/17444f28-1623200353-cec3ee26c00789da2e9c86d68a146076.png?fit=max&auto=format&n=t35Dbaum6Rkuz_d5&q=85&s=4d65a04f059606811fff8cb3f78893c5" 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/dDWpooIQ48haNjyU/images/76dd03dc-1623200359-d64ec4a268aeeba7d00e8f1f27cdba02.png?fit=max&auto=format&n=dDWpooIQ48haNjyU&q=85&s=ea2264b6a6c7d4d5ea7034afe62c0d5b" 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/1W9AWrFs7khmFUQr/images/c8b2f64a-1623200363-4516df5d176b925ff2a8a4f375ffa390.png?fit=max&auto=format&n=1W9AWrFs7khmFUQr&q=85&s=737f18696eab20ff7bd3a0e90456b260" 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/8ODUflBxloB1jkgP/images/0396c69b-1623200368-107d08827e73dbe27f7ac75a1729a5a7.png?fit=max&auto=format&n=8ODUflBxloB1jkgP&q=85&s=3a4747269a10f819387ab1d916bc8616" 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/-ESEkh1kVWNrvtT0/images/6902510b-1623200373-c1350bfa25fe3d944c6365bf0947051d.png?fit=max&auto=format&n=-ESEkh1kVWNrvtT0&q=85&s=4f1faa0085c0847c7a3d3210c631ae3d" 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/CrArf1QwUPg5EvCC/images/2a9dce96-1623200377-190de2da7e40bedd659d6a80a40977ce.png?fit=max&auto=format&n=CrArf1QwUPg5EvCC&q=85&s=3001ba4e2c77d89689ed2553293299cc" 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/avBd8wan4jblx26s/images/25605b29-1623200380-3eb1f8932990ef683e7cd0a42eedc4da.png?fit=max&auto=format&n=avBd8wan4jblx26s&q=85&s=7f880cd0f5fb54a16542e1133871f665" 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>