> ## Documentation Index
> Fetch the complete documentation index at: https://www.cometchat.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Mentions Formatter

> Add @mentions with styled tokens, suggestion list, and click handling in CometChat React UI Kit.

<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/custom-text-formatter-guide) \| [All Guides](/ui-kit/react/guide-overview) |
</Accordion>

`CometChatMentionsFormatter` extends [CometChatTextFormatter](/ui-kit/react/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/message-list), [CometChatMessageComposer](/ui-kit/react/message-composer), or [CometChatConversations](/ui-kit/react/conversations).

***

## Next Steps

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

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

  <Card title="All Guides" href="/ui-kit/react/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>