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

# Mentions Formatter

> Format @mentions in CometChat Flutter UI Kit message lists, composers, and conversations with custom styles and tap handling.

<Accordion title="AI Integration Quick Reference">
  | Field | Value |
  | - | - |
  | Package | `cometchat_chat_uikit` |
  | Import | `import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';` |
  | Purpose | Format @mentions in CometChat Flutter UI Kit message lists, composers, and conversations with custom styles and tap handling. |
  | Key classes | `CometChatMentionsFormatter` · `CometChatMessageList` · `CometChatConversations` · `CometChatMessageComposer` |
  | Related | [Text Formatters](/ui-kit/flutter/customization-text-formatters) · [Custom Text Formatter Guide](/ui-kit/flutter/custom-text-formatter-guide) |
</Accordion>

## Overview

The `CometChatMentionsFormatter` class formats mentions within text messages displayed in the chat interface. For the base `CometChatTextFormatter` API, see [Text Formatters](/ui-kit/flutter/customization-text-formatters).

## Usage

Pass `CometChatMentionsFormatter` to the `textFormatters` property of widgets like [CometChatConversations](/ui-kit/flutter/conversations), [CometChatMessageList](/ui-kit/flutter/message-list), or [CometChatMessageComposer](/ui-kit/flutter/message-composer).

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    textFormatters: [
      CometChatMentionsFormatter(
        messageBubbleTextStyle: (theme, alignment, {forConversation = false}) =>
          TextStyle(
            color: alignment == BubbleAlignment.left ? Colors.orange : Colors.pink,
            fontSize: 14,
            fontWeight: FontWeight.bold,
          ),
      ),
    ]
    ```
  </Tab>
</Tabs>

***

## Actions

##### onMentionTap

Setting a listener for mention-click events in Message Bubbles. This listener is activated when a mention is clicked, returning the corresponding user object.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatMessageList(
      user: user,
      textFormatters: [
        CometChatMentionsFormatter(
          onMentionTap: (mention, mentionedUser, {message}) {
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(content: Text('Tapped on ${mentionedUser.name}')),
            );
          },
          messageBubbleTextStyle: (theme, alignment, {forConversation = false}) =>
            TextStyle(
              color: alignment == BubbleAlignment.left ? Colors.orange : Colors.greenAccent,
              fontSize: 14,
              fontWeight: FontWeight.bold,
            ),
        ),
      ],
    )
    ```
  </Tab>
</Tabs>

***

## Customization

| Property | Description | Code |
| - | - | - |
| trackingCharacter | Character that triggers mention search | `String? trackingCharacter` |
| pattern | Regex pattern to identify mentions | `RegExp? pattern` |
| messageBubbleTextStyle | Text style for message bubble | `TextStyle? messageBubbleTextStyle` |
| messageInputTextStyle | Text style for message input | `TextStyle? messageInputTextStyle` |
| onMentionTap | Callback for mention tap actions | `void Function(User)? onMentionTap` |
| groupMembersRequestBuilder | Request builder for group members | `GroupMembersRequestBuilder?` |
| usersRequestBuilder | Request builder for users | `UsersRequestBuilder?` |

***

## Advanced

### Composer Mention Text Style

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatMessageComposer(
      user: user,
      textFormatters: [
        CometChatMentionsFormatter(
          messageInputTextStyle: (theme) {
            return const TextStyle(
              color: Colors.lightBlueAccent,
              fontSize: 14,
              fontWeight: FontWeight.bold,
            );
          },
        ),
      ],
    )
    ```
  </Tab>
</Tabs>

### Message Bubble Mention Text Style

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatMessageList(
      user: user,
      textFormatters: [
        CometChatMentionsFormatter(
          messageBubbleTextStyle: (theme, alignment, {forConversation = false}) =>
            TextStyle(
              color: alignment == BubbleAlignment.left ? Colors.orange : Colors.greenAccent,
              fontSize: 14,
              fontWeight: FontWeight.bold,
            ),
        ),
      ],
    )
    ```
  </Tab>
</Tabs>

### Conversations Mention Text Style

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatConversations(
      textFormatters: [
        CometChatMentionsFormatter(
          messageBubbleTextStyle: (theme, alignment, {forConversation = false}) =>
            const TextStyle(
              color: Colors.lightBlueAccent,
              fontSize: 14,
              fontWeight: FontWeight.bold,
            ),
        ),
      ],
    )
    ```
  </Tab>
</Tabs>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.