Styling

Import the default stylesheet once:

import "@danielivanov/mention/styles.css";

The stylesheet targets data-mention-popover, data-mention-item, data-mention-empty, and data-mention-loading. Components also accept normal className and style props.

Default colors resolve through shadcn variables such as --popover, --popover-foreground, --accent, --accent-foreground, --border, and --muted-foreground. The library's private --mention-* variables are defined on [data-mention-popover]; override them at that selector when needed.

[data-mention-popover] {
  --mention-item-bg-active: #e0e7ff;
  --mention-item-fg-active: #312e81;
}

Use unstyled on Root to omit the default styling data attributes, or omit the stylesheet entirely. ARIA attributes and event handling remain available.

The active option uses aria-selected="true". Style that attribute so mouse and keyboard navigation share one visible state:

.my-option[aria-selected="true"] {
  background: #e0e7ff;
  color: #312e81;
}

Set theme variables in your application's dark theme. Without application tokens, the default stylesheet uses prefers-color-scheme fallbacks. It also includes forced-colors rules for the active option.