Styling & Customization

The MentionInput component is designed to be fully customizable. You can use Tailwind CSS, your own CSS classes, or any CSS framework by passing className values for each part of the component via the slotsProps object. This flexible approach allows you to match the look and feel of your application or design system.

Customizing with className

You can customize the appearance of each part of the MentionInput component by passing a slotsProps object. This object lets you specify a className for each slot:

container: The outer container
contentEditable: The contentEditable element for rich text input
modal: The dropdown list container
option: Each option in the list
chipClassName: The CSS class name for mention chips that appear in the input
highlightedClassName: Applied to the currently highlighted option
noOptions: The element shown when there are no options

For each slot (except highlightedClassName and chipClassName), pass an object with a className property. For highlightedClassName and chipClassName, pass a string with the class name to apply.

Example: Default Styles

To use the default styles that come with mentis, simply import the CSS file:

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

<MentionInput options={options} />;

This will apply the default styling to all parts of the component without any additional configuration.

Example: Custom CSS with className

Here's an example using your own CSS classes (see index.css for definitions):

<MentionInput
  options={options}
  slotsProps={{
    container: { className: "mentis-demo-container" },
    contentEditable: { className: "mentis-demo-input" },
    modal: { className: "mentis-demo-listbox" },
    option: { className: "mentis-demo-option" },
    chipClassName: "mentis-demo-chip",
    highlightedClassName: "mentis-demo-option-highlighted",
    noOptions: { className: "mentis-demo-no-options" },
  }}
/>

This approach gives you complete control over the component's appearance using your own CSS. You can define these classes in your project's CSS file (for example, index.css).

Example: Tailwind CSS

Here's an example using Tailwind CSS utility classes directly in the slotsProps:

<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 rounded-lg transition",
    },
    chipClassName:
      "inline-flex items-center px-2 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800 hover:bg-blue-200 transition-colors",
    highlightedClassName: "bg-blue-500 text-white hover:bg-blue-500",
    noOptions: { className: "px-4 py-2 text-gray-400" },
  }}
/>

This approach lets you style the component using Tailwind's utility classes for rapid prototyping and design consistency.

Chip Styling Considerations

When styling mention chips, pay special attention to line-height and padding to prevent layout shifting:

Line-Height Matching

Chips are inline elements that flow with text content. To maintain consistent text alignment and prevent vertical layout shifts, ensure your chip's total height (including padding) matches the line-height of your text:

For more advanced usage, see the Props Reference and Basic Usage pages.