# mentis

> Accessible @mention autocomplete input for React. ContentEditable, zero dependencies, TypeScript-first — a modern react-mentions alternative.

mentis is a React component library that adds Slack- and Notion-style `@mention`
autocomplete to an input. It is built on `contentEditable` so mentions render as
real DOM chips, and it is commonly used as a maintained alternative to
`react-mentions`.

Install with `npm install mentis`. Import the component and its stylesheet:

    import { MentionInput } from "mentis";
    import "mentis/dist/index.css";

The controlled props are `displayValue` (what the user sees) and `dataValue`
(option IDs for storage). There is no plain `value` prop. `onChange` receives a
`MentionData` object, not a string.

## Documentation

- [Installation](https://mentis.alexdunlop.com/docs/installation): You can install mentis via npm, yarn, pnpm, or bun.
- [Overview](https://mentis.alexdunlop.com/docs/overview): Introduction to the MentionInput component and its main features.
- [Basic usage](https://mentis.alexdunlop.com/docs/basic-usage): A minimal controlled MentionInput example in React, with options, displayValue, dataValue, and onChange.
- [Options](https://mentis.alexdunlop.com/docs/options): How to structure and use the options prop for mentions.
- [Chips](https://mentis.alexdunlop.com/docs/chips): Understanding mention chips and their role in the MentionInput component.
- [Styling & Customization](https://mentis.alexdunlop.com/docs/styling): Style the mentis MentionInput with Tailwind, CSS modules, or plain CSS using the slotsProps class names for each slot.
- [Props Reference](https://mentis.alexdunlop.com/docs/props): Detailed documentation of MentionInput component props.
- [onChange Callback](https://mentis.alexdunlop.com/docs/onchange): How the mentis onChange callback works: the MentionData object, displayValue vs dataValue, and the mentions array.
- [Accessibility](https://mentis.alexdunlop.com/docs/accessibility): Accessibility features and ARIA support in MentionInput.
- [Keyboard Navigation](https://mentis.alexdunlop.com/docs/keyboard-navigation): How to use keyboard controls when the mention modal is open.
- [Examples](https://mentis.alexdunlop.com/docs/examples): Runnable mentis example apps: plain React, custom CSS, Tailwind, Next.js, and the Vercel AI SDK.
- [LLM Context](https://mentis.alexdunlop.com/docs/llm): Comprehensive context about the mentis library for AI assistants and LLMs

## Articles

- [How to migrate from react-mentions to mentis](https://mentis.alexdunlop.com/blog/migrate-from-react-mentions): react-mentions still has 691k weekly downloads, but its GitHub repo is gone and the last release was June 2023. Here is a prop-by-prop migration to mentis — and when a fork is the better call.
- [Why mention inputs outgrow the textarea](https://mentis.alexdunlop.com/blog/contenteditable-vs-textarea-mention-input): Most React mention libraries paint highlights on a div behind a transparent textarea. It is a clever trick with specific failure modes. Here is where it breaks, and what contentEditable costs you instead.
- [The ARIA combobox pattern for @mention autocomplete](https://mentis.alexdunlop.com/blog/accessible-mention-autocomplete-aria-combobox): A mention dropdown is a combobox, and most implementations get it wrong in the same three ways. The attributes you need, why focus must stay in the input, and how to test it.

## Optional

- [Full documentation as plaintext](https://mentis.alexdunlop.com/llms-full.txt): every page above concatenated into one file
- [GitHub repository](https://github.com/alexanderdunlop/mentis): source, issues, and examples
- [npm package](https://www.npmjs.com/package/mentis): release history and install instructions