> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-agent-in-group-react-v6.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Multi Tab Chat UI Guide

> Build a multi-tab CometChat Flutter UI Kit chat interface with Conversations, Users, Groups, headers, message lists, and composers.

This guide helps you create a multi-tab chat user interface using the CometChat V6 UIKit in Flutter. The final UI consists of three tabs: Conversations, Users, and Groups.

##### Create the Multi-Tab Chat UI:

Update your `lib/multi_tab_chat_ui.dart` file with the following code:

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
    import 'package:flutter/material.dart';

    class MultiTabUIGuideExample extends StatefulWidget {
      const MultiTabUIGuideExample({super.key});

      @override
      State<MultiTabUIGuideExample> createState() => _MultiTabUIGuideExampleState();
    }

    class _MultiTabUIGuideExampleState extends State<MultiTabUIGuideExample> {

      void _navigateToMessages(BuildContext context, {User? user, Group? group}) {
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => Scaffold(
              appBar: CometChatMessageHeader(
                user: user,
                group: group,
              ),
              body: SafeArea(
                child: Column(
                  children: [
                    Expanded(
                      child: CometChatMessageList(
                        user: user,
                        group: group,
                      ),
                    ),
                    CometChatMessageComposer(
                      user: user,
                      group: group,
                    ),
                  ],
                ),
              ),
            ),
          ),
        );
      }

      @override
      Widget build(BuildContext context) {
        return DefaultTabController(
          length: 3,
          child: Scaffold(
            appBar: AppBar(
              title: const Text('Multi Tab UI Guide'),
              backgroundColor: Colors.white,
              leading: null,
              automaticallyImplyLeading: false,
              bottom: const TabBar(
                tabs: [
                  Tab(icon: Icon(Icons.chat), text: 'Conversation'),
                  Tab(icon: Icon(Icons.person), text: 'Users'),
                  Tab(icon: Icon(Icons.group), text: 'Groups'),
                ],
              ),
            ),
            body: TabBarView(
              children: [
                CometChatConversations(
                  hideAppbar: true,
                  onItemTap: (conversation) {
                    _navigateToMessages(
                      context,
                      user: conversation.conversationWith is User
                          ? conversation.conversationWith as User
                          : null,
                      group: conversation.conversationWith is Group
                          ? conversation.conversationWith as Group
                          : null,
                    );
                  },
                ),
                CometChatUsers(
                  hideAppbar: true,
                  hideSearch: true,
                  onItemTap: (user) {
                    _navigateToMessages(context, user: user);
                  },
                ),
                CometChatGroups(
                  hideAppbar: true,
                  hideSearch: true,
                  onItemTap: (group) {
                    _navigateToMessages(context, group: group);
                  },
                ),
              ],
            ),
          ),
        );
      }
    }
    ```
  </Tab>
</Tabs>

## Key V6 Differences

| Aspect                 | V5                                                                                                | V6                                                                                    |
| ---------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
| Composite widgets      | `CometChatConversationsWithMessages`, `CometChatUsersWithMessages`, `CometChatGroupsWithMessages` | Not available — compose manually                                                      |
| Navigation to messages | Handled internally by composite widgets                                                           | You handle navigation and compose `MessageHeader` + `MessageList` + `MessageComposer` |
| State management       | GetX                                                                                              | BLoC                                                                                  |