> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-fix-codeowners-webhooks-pattern.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Multi Tab Chat UI Guide
> Multi Tab Chat UI Guide — CometChat integration guide.
This guide will help you create a multi-tab chat user interface using the cometchat\_chat\_uikit package in Flutter. The final UI will consist of three tabs: Conversations, Users, and Groups.
##### Create the Multi-Tab Chat UI:
Update your `lib/multi_tab_chat_ui_guid.dart` file with the following code:
```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 createState() => _MultiTabUIGuideExampleState();
}
class _MultiTabUIGuideExampleState extends State {
@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: const TabBarView(
children: [
CometChatConversationsWithMessages(
conversationsConfiguration: ConversationsConfiguration(
hideAppbar: true
)
),
CometChatUsersWithMessages(
usersConfiguration: UsersConfiguration(
hideAppbar: true,
hideSearch: true
)
),
CometChatGroupsWithMessages(
groupsConfiguration: GroupsConfiguration(
hideAppbar: true,
hideSearch: true
)
),
],
),
),
);
}
}
```