> ## 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 React UI Kit messages with custom styles, mention suggestions, group member mentions, and tap handling.

<Accordion title="AI Integration Quick Reference">
  | Field | Value |
  | - | - |
  | Package | `@cometchat/chat-uikit-react` |
  | Key class | `CometChatMentionsFormatter` (extends `CometChatTextFormatter`) |
  | Required setup | `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` |
  | Purpose | Format @mentions with styled tokens, suggestion list, and click handling for users and group members |
  | Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) |
  | Related | [Custom Text Formatter](/ui-kit/react/v6/custom-text-formatter-guide) \| [All Guides](/ui-kit/react/v6/guide-overview) |
</Accordion>

`CometChatMentionsFormatter` extends [CometChatTextFormatter](/ui-kit/react/v6/custom-text-formatter-guide) to format @mentions in text messages. It styles mention tokens, generates suggestion lists as users type, and handles click events on rendered mentions.

| Capability | Description |
| - | - |
| Mention formatting | Auto-formats `<@uid:...>` placeholders into styled tokens |
| Custom styles | Colors, fonts, and backgrounds for mention text |
| User and group mentions | Works with both individual users and group members |
| Suggestion list | Generates mention candidates from user input |
| Click handling | Listener interface for tap/click on rendered mentions |

***

## Usage

### 1. Initialize the formatter

```javascript lines theme={null}
import { CometChatMentionsFormatter } from "path-to-your-file";

const mentionsFormatter = new CometChatMentions();
mentionsFormatter.setCometChatUserGroupMembers(userList);
```

### 2. Format a message

Provide the raw message string containing mention placeholders, then apply the formatter:

```javascript lines theme={null}
const unformattedMessage = "<@uid:aliceuid> just shared a photo!";
const formattedMessage = mentionsFormatter.getFormattedText(unformattedMessage);
// Render formattedMessage in your message component
```

The output contains HTML with styled mentions ready for rendering.

### 3. Pass to components

Use the `textFormatters` prop on [CometChatMessageList](/ui-kit/react/v6/message-list), [CometChatMessageComposer](/ui-kit/react/v6/message-composer), or [CometChatConversations](/ui-kit/react/v6/conversations).

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Custom Text Formatter" href="/ui-kit/react/v6/custom-text-formatter-guide">
    Build custom inline text patterns.
  </Card>

  <Card title="Message List" href="/ui-kit/react/v6/message-list">
    Render real-time message threads.
  </Card>

  <Card title="All Guides" href="/ui-kit/react/v6/guide-overview">
    Browse all feature and formatter guides.
  </Card>

  <Card title="Sample App" href="https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app">
    Full working sample application on GitHub.
  </Card>
</CardGroup>


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