> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-v6-beta2-flutter-uikit.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-22654f5b-docs-v6-beta2-flutter-uikit/YMOhj6Aj_j1BFKgB/images/a38e7217-1623200231-32de98eb7bd8c6a65bc3817ff43270e7.png?fit=max&auto=format&n=YMOhj6Aj_j1BFKgB&q=85&s=7b30511693edf0911d6751c85051721f" width="2514" height="1180" data-path="images/a38e7217-1623200231-32de98eb7bd8c6a65bc3817ff43270e7.png" />
</Frame>

<Tabs>
  <Tab title="Angular">
    ```js theme={null}
    import { CometChatUI } from "../components/CometChatUI/CometChat/cometchat-ui.module";

    <div>
      <CometChatUI></CometChatUI>
    </div>
    ```
  </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-v6-beta2-flutter-uikit/2Yk1_Ncte5qBKMqt/images/7980ed96-1623200239-d050d03c5b531604184c0febfb23a68c.png?fit=max&auto=format&n=2Yk1_Ncte5qBKMqt&q=85&s=aa211a68e57dc46306bc675598b1a8c1" width="1440" height="900" data-path="images/7980ed96-1623200239-d050d03c5b531604184c0febfb23a68c.png" />
</Frame>

<Tabs>
  <Tab title="Angular">
    ```js theme={null}
    import { CometChatUserListWithMessages } from "../components/Users/CometChat-user-list-with-messages/cometchat-user-list-with-messages.module";

    <div>
      <cometchat-user-list-with-messages></cometchat-user-list-with-messages>
    </div>
    ```
  </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-v6-beta2-flutter-uikit/g3E3THkvQTdQ1Mu8/images/f91c54e1-1623200243-a61adb80c6b268aa3ecac505a85a2cf1.png?fit=max&auto=format&n=g3E3THkvQTdQ1Mu8&q=85&s=f4ef75c193fcaac3f20ea908bc1e4c94" width="1440" height="900" data-path="images/f91c54e1-1623200243-a61adb80c6b268aa3ecac505a85a2cf1.png" />
</Frame>

<Tabs>
  <Tab title="Angular">
    ```js theme={null}
    import { CometChatGroupListWithMessages } from "../components/Groups/CometChat-group-with-messages/cometchat-group-list-with-messages.module";
    <div>
      <cometchat-group-list-with-messages></cometchat-group-list-with-messages>
    </div>
    ```
  </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-v6-beta2-flutter-uikit/l0BQw00NEQYzYvIU/images/af963baa-1623200248-eb3df94bffbbe8e81ddcaff20da8d259.png?fit=max&auto=format&n=l0BQw00NEQYzYvIU&q=85&s=e8971e48a35da5868056edbf75653eea" width="1440" height="900" data-path="images/af963baa-1623200248-eb3df94bffbbe8e81ddcaff20da8d259.png" />
</Frame>

<Tabs>
  <Tab title="Angular">
    ```js theme={null}
    import { CometChatConversationListWithMessages } from "../components/Chats/CometChat-conversation-list-with-messages/cometchat-conversation-list-with-messages.module";
    <div>
      <cometchat-conversation-list-with-messages></cometchat-conversation-list-with-messages>
    </div>
    ```
  </Tab>
</Tabs>

## CometChatMessages

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

<Tabs>
  <Tab title="Angular">
    ```js theme={null}
    import { CometChatMessages } from "../components/Messages/CometChat-messages/cometchat-messages.module";
    <div>
      <cometchat-messages></cometchat-messages>
    </div>
    ```
  </Tab>
</Tabs>

## 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-v6-beta2-flutter-uikit/F8Gwgh225UVQ2ohc/images/e387d01c-1623200254-027278c454f992c5b19690b92fc0562c.png?fit=max&auto=format&n=F8Gwgh225UVQ2ohc&q=85&s=1b71af18ce7d319d8bab9c15acdae50a" width="1440" height="900" data-path="images/e387d01c-1623200254-027278c454f992c5b19690b92fc0562c.png" />
</Frame>

<Tabs>
  <Tab title="Angular">
    ```js theme={null}
    import { CometChatUserList } from "../components/Users/CometChat-user-list/cometchat-user-list.module";
    <div>
      <cometchat-user-list [friendsOnly]=true> </cometchat-user-list>
    </div>
    ```
  </Tab>
</Tabs>

| Parameter   | Description                                                                                                         | Type     |
| ----------- | ------------------------------------------------------------------------------------------------------------------- | -------- |
| friendsOnly | This property when set to true will return only the friends of the logged-in user. Value could be *true* or *false* | 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-v6-beta2-flutter-uikit/oQzXdHfclcei7Uj5/images/9a9b034c-1623200257-e5b6bec3cbb6bdef1e337706aca2e898.png?fit=max&auto=format&n=oQzXdHfclcei7Uj5&q=85&s=84384f251086e5f3518b1032959f3a4e" width="1440" height="900" data-path="images/9a9b034c-1623200257-e5b6bec3cbb6bdef1e337706aca2e898.png" />
</Frame>

<Tabs>
  <Tab title="Angular">
    ```js theme={null}
    import { CometChatGroupList } from "../components/Groups/CometChat-group-list/cometchat-group-list.module";
    <div>
      <cometchat-group-list></cometchat-group-list>
    </div>
    ```
  </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-v6-beta2-flutter-uikit/eu2J6bcr13nOTefL/images/6cbd45b0-1623200260-c16048c76e3b18cff4ce2c3ba019e3b6.png?fit=max&auto=format&n=eu2J6bcr13nOTefL&q=85&s=9efdaf59668f58bd8ed2fc6f25204306" width="1440" height="900" data-path="images/6cbd45b0-1623200260-c16048c76e3b18cff4ce2c3ba019e3b6.png" />
</Frame>

<Tabs>
  <Tab title="Angular">
    ```js theme={null}
    import { CometChatConversationList } from "../components/Chats/CometChat-conversation-list/cometchat-conversation-list.module";
    <div>
      <cometchat-conversation-list></cometchat-conversation-list>
    </div>
    ```
  </Tab>
</Tabs>