Mentis

Accessible @mention autocomplete input for React.
ContentEditable, zero dependencies, TypeScript-first.

📖 Read the docs »  ·  ▶️ Live demo »

Mentis adds Slack- and Notion-style @mention autocomplete to a React app. You give it a list of options, it gives you an input where typing @ opens a filtered dropdown and picking someone inserts a styled chip. onChange hands back both what the user sees (displayValue) and the clean IDs you want to store (dataValue), so you never have to parse mention syntax yourself.

It's built on contentEditable rather than a plain <textarea>, which is what makes real chips, caret navigation through mentions, and paste handling possible. It ships with full ARIA combobox semantics, TypeScript types, and no runtime dependencies.

react-mentions has been the default choice for years, but its last release was 4.4.10 in June 2023, its GitHub repository now returns a 404, and it's built on a <textarea> + overlay approach that can't render true chips. Mentis is a maintained, modern alternative:

If you're searching for a react-mentions alternative, a React mentions input, an @mention autocomplete, or a tagging / typeahead input — that's what this is.

• Features
• Quick Start
• Examples
• API Reference
• Keyboard Navigation
• Advanced Features
• FAQ
• For AI assistants and LLMs

• 🎯 ContentEditable Architecture - Modern implementation with rich text support
• 🧠 Smart Mention Detection - DOM-aware detection that distinguishes mentions from regular text
• ⚡ Zero Dependencies - Lightweight with no external dependencies
• ♿ Fully Accessible - Complete ARIA roles and keyboard navigation
• 🎨 Highly Customizable - Slot-based customization system
• 🔧 TypeScript Support - Full type safety out of the box
• 📱 Flexible Triggers - Customizable trigger characters or strings
• 🎪 Rich Text Support - Display mentions as styled chips
• 🚀 Function Values - Support for executable functions as option values
• 📋 Advanced Paste Handling - Intelligent mention parsing from pasted content
• 🔄 Auto-Conversion - Optional automatic conversion of text mentions to chips
• ⌨️ Custom Keyboard Handling - Support for custom keyboard events and form submission
• 💾 Data Value Support - Programmatic mention reconstruction from data values

npm install mentis

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

function App() {
  const [dataValue, setDataValue] = useState("");

  return (
    <MentionInput
      dataValue={dataValue}
      onChange={(mentionData) => {
        setDataValue(mentionData.dataValue);
      }}
      options={[
        { label: "Alice Johnson", value: "alice" },
        { label: "Bob Smith", value: "bob" },
        { label: "Charlie Brown", value: "charlie" },
      ]}
    />
  );
}

import { MentionInput } from "mentis";

function BasicExample() {
  return (
    <MentionInput
      options={[
        { label: "Alice Johnson", value: "alice" },
        { label: "Bob Smith", value: "bob" },
        { label: "Charlie Brown", value: "charlie" },
      ]}
      onChange={(mentionData) => console.log(mentionData)}
    />
  );
}

import { MentionInput } from "mentis";

function FunctionValueExample() {
  const [displayValue, setDisplayValue] = useState("");

  return (
    <MentionInput
      displayValue={displayValue}
      options={[
        { label: "Send Message", value: () => console.log("Message sent!") },
        { label: "Clear Input", value: () => setDisplayValue("") },
        { label: "Alice Johnson", value: "alice" },
      ]}
      onChange={(mentionData) => setDisplayValue(mentionData.displayValue)}
    />
  );
}

import { MentionInput } from "mentis";

function StyledExample() {
  return (
    <MentionInput
      options={options}
      slotsProps={{
        container: {
          className: "w-full max-w-lg relative",
        },
        contentEditable: {
          className:
            "w-full rounded-xl border border-gray-300 bg-white px-4 py-3 text-base shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none transition placeholder-gray-400",
        },
        modal: {
          className:
            "absolute z-10 mt-2 w-full bg-white border border-gray-200 rounded-xl shadow-lg max-h-60 overflow-auto",
        },
        option: {
          className:
            "px-4 py-2 cursor-pointer text-base text-gray-800 hover:bg-gray-100 hover:text-black rounded-lg transition",
        },
        highlightedClassName: "bg-blue-500 text-white hover:bg-blue-500",
        chipClassName: "bg-blue-500 text-white hover:bg-blue-500",
      }}
    />
  );
}

import { MentionInput } from "mentis";

function CustomTriggerExample() {
  return (
    <MentionInput
      trigger="#"
      options={[
        { label: "React", value: "react" },
        { label: "TypeScript", value: "typescript" },
        { label: "JavaScript", value: "javascript" },
      ]}
    />
  );
}

import { MentionInput } from "mentis";

function AutoConvertExample() {
  return (
    <MentionInput
      autoConvertMentions={true}
      keepTriggerOnSelect={false}
      options={[
        { label: "Alice Johnson", value: "alice" },
        { label: "Bob Smith", value: "bob" },
      ]}
    />
  );
}

import { MentionInput } from "mentis";

function FormSubmissionExample() {
  const [displayValue, setDisplayValue] = useState("");

  const handleSubmit = () => {
    console.log("Submitting:", displayValue);
    setDisplayValue("");
  };

  return (
    <MentionInput
      displayValue={displayValue}
      onChange={(mentionData) => setDisplayValue(mentionData.displayValue)}
      onKeyDown={(event) => {
        // Handle Enter key for form submission
        if (event.key === "Enter") {
          event.preventDefault();
          handleSubmit();
        }
      }}
      options={[
        { label: "Alice Johnson", value: "alice" },
        { label: "Bob Smith", value: "bob" },
      ]}
    />
  );
}

import { MentionInput } from "mentis";

function KeyboardShortcutsExample() {
  return (
    <MentionInput
      onKeyDown={(event) => {
        // Ctrl/Cmd + Enter to submit
        if ((event.ctrlKey || event.metaKey) && event.key === "Enter") {
          event.preventDefault();
          handleSubmit();
        }

        // Ctrl/Cmd + S to save
        if ((event.ctrlKey || event.metaKey) && event.key === "s") {
          event.preventDefault();
          saveContent();
        }
      }}
      options={options}
    />
  );
}

type MentionOption = {
  label: string; // Display text
  value: string | Function; // Unique identifier or executable function
};

type MentionData = {
  displayValue: string; // Text as displayed to user (with mention labels)
  dataValue: string; // Text with mention values (actual data)
  mentions: Array<{
    label: string; // Display text of the mention
    value: string; // Unique identifier of the mention
    startIndex: number; // Start position in the text
    endIndex: number; // End position in the text
  }>;
};

type SlotProps = {
  container?: React.HTMLAttributes<HTMLDivElement>;
  contentEditable?: ContentEditableInputCustomProps;
  modal?: ModalProps;
  option?: OptionProps;
  noOptions?: React.HTMLAttributes<HTMLDivElement>;
  highlightedClassName?: string;
  chipClassName?: string;
};

• Arrow Keys: Navigate through mention options
• Enter: Select highlighted option
• Escape: Close mention dropdown
• Tab: Navigate through options and select
• Backspace: Navigate into mention chips

The onKeyDown prop allows you to handle custom keyboard events:

• Form Submission: Handle Enter key for form submission when the modal is closed
• Keyboard Shortcuts: Implement custom shortcuts like Ctrl+S for save
• Event Handling: The component's internal handling (navigation, selection) takes precedence over custom handlers

Note: When the mention modal is open, Enter, Tab, Escape, and arrow keys are handled internally for navigation and selection.

The dataValue prop enables powerful programmatic control over mention content:

• Setting Content: Pass dataValue="alice bob" to programmatically load mentions
• Clean Data Extraction: onChange provides clean data values (IDs) separate from display text
• Mention Reconstruction: Automatically converts data values back to visual mentions
• AI Integration: Perfect for sending clean data to APIs while showing rich UI to users
• Editing Support: Load existing content with mentions for editing workflows

// Set mentions programmatically
setDataValue("user-123 user-456"); // Shows "@John Doe @Jane Smith"

// Get clean data for APIs
onChange={(data) => {
  console.log(data.displayValue); // "@John Doe hello @Jane Smith"
  console.log(data.dataValue);    // "user-123 hello user-456"
  sendToAPI(data.dataValue);      // Send clean data to backend
}}

Options can have function values that execute when selected, useful for actions like sending messages or clearing input.

When autoConvertMentions is enabled, the component automatically converts text mentions to chips when users type space or press Enter.

The component intelligently parses mentions from pasted content, converting them to chips automatically.

Mentions are displayed as styled chips within the contentEditable interface, providing a rich text experience.

Install mentis, import MentionInput and its stylesheet, and pass an options array. Typing @ opens the dropdown. See Quick Start.

Not literally — the prop API is different (options instead of <Mention data={...} /> children, and displayValue/dataValue instead of a single markup string). But it covers the same use cases with less setup, and you don't have to parse @[name](id) markup yourself. See Why Mentis?.

Yes. Pass trigger="#" (or any string) to change it. Useful for hashtags, slash commands, or $ for entities.

Yes. MentionInput is a client component, so import it from a file with "use client" (or a component that already has it). There's a Next.js example.

Yes. Every part is styled via slotsProps — pass Tailwind classes to container, contentEditable, modal, option, chipClassName, and highlightedClassName. See Custom Styling with Tailwind.

Use dataValue from onChange — it contains your option IDs instead of display labels. Store that, then pass it back as the dataValue prop later to rehydrate the input with chips. See DataValue Control.

Yes, types ship in the package — no @types/* install needed. MentionInputProps, MentionOption, MentionData, and SlotProps are all exported.

Yes. It implements the ARIA combobox/listbox/option pattern with full keyboard navigation and screen reader support. See Accessibility.

Zero runtime dependencies, and React is a peer dependency. See the bundle size badge for the current number.

A single MentionInput has one trigger, but options can mix entity kinds, and option values can be functions to trigger actions instead of inserting a chip. See Function Values.

If you're an AI coding assistant, or you're pointing one at this library, these are the machine-readable entry points:

• /llms.txt — index of every documentation page
• /llms-full.txt — the full documentation as a single plaintext file
• LLM Context page — architecture, types, and implementation notes

The two props most often got wrong: the controlled value props are displayValue (what the user sees, with labels) and dataValue (IDs for storage). There is no plain value prop.

Explore complete examples in the following directories:

• simple
• styling
• tailwind
• nextjs

MIT © Alexander Dunlop