> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-react-v7-feature-guides.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-react-v7-feature-guides/Uj5mf3HWvDiTfI9x/images/17444f28-1623200353-cec3ee26c00789da2e9c86d68a146076.png?fit=max&auto=format&n=Uj5mf3HWvDiTfI9x&q=85&s=2d7647605f128a9653bff7cf23e46d0e" 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-react-v7-feature-guides/qp24vnUCPvwoivgU/images/76dd03dc-1623200359-d64ec4a268aeeba7d00e8f1f27cdba02.png?fit=max&auto=format&n=qp24vnUCPvwoivgU&q=85&s=6a557b42c58f466a01d9a0613c058d86" 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-react-v7-feature-guides/nW_BSPBDUXv6ah2Z/images/c8b2f64a-1623200363-4516df5d176b925ff2a8a4f375ffa390.png?fit=max&auto=format&n=nW_BSPBDUXv6ah2Z&q=85&s=165ece5e906764b298a8cfe106e601f8" 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-react-v7-feature-guides/y8lbvG5Pwt_qJzJw/images/0396c69b-1623200368-107d08827e73dbe27f7ac75a1729a5a7.png?fit=max&auto=format&n=y8lbvG5Pwt_qJzJw&q=85&s=93dc2005bfca54f7604b59f2fae7498d" 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-react-v7-feature-guides/6uM9pWnxnWBZkead/images/6902510b-1623200373-c1350bfa25fe3d944c6365bf0947051d.png?fit=max&auto=format&n=6uM9pWnxnWBZkead&q=85&s=211c05786b144adf24174f24f9cd6ff6" 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-react-v7-feature-guides/rNh1qkC7lQsH3jv9/images/2a9dce96-1623200377-190de2da7e40bedd659d6a80a40977ce.png?fit=max&auto=format&n=rNh1qkC7lQsH3jv9&q=85&s=a40e60bd9a3f395fc8b180446aca4215" 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-react-v7-feature-guides/c9P56xYR19nzvVZU/images/25605b29-1623200380-3eb1f8932990ef683e7cd0a42eedc4da.png?fit=max&auto=format&n=c9P56xYR19nzvVZU&q=85&s=c9653bcbe42707338df19b2b7acb4d1e" 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>