Styling

CSS variables, classes, and data attributes. No CSS-in-JS required.

CSS Variables

Set on [data-mentions] or any ancestor.

Prop Type Default Description
--mention-bg color oklch(0.93 0.03 250) Mention highlight background
--mention-radius length 3px Mention border radius
--mention-placeholder color #9ca3af Placeholder text color
--dropdown-bg color white Dropdown background
--dropdown-border border 1px solid #e2e8f0 Dropdown border
--dropdown-radius length 8px Dropdown border radius
--dropdown-shadow shadow 0 4px 12px rgba(0,0,0,0.08) Dropdown shadow
--dropdown-max-height length 240px Dropdown max height
--item-padding length 8px 12px Item padding
--item-active-bg color #f1f5f9 Highlighted item background 
/* Dark theme */
[data-mentions] {
  --mention-bg: oklch(0.75 0.15 250);
  --dropdown-bg: #18181b;
  --dropdown-border: 1px solid rgba(255,255,255,0.1);
  --dropdown-shadow: 0 8px 32px rgba(0,0,0,0.5);
  --item-active-bg: rgba(99,102,241,0.2);
  --mention-placeholder: #71717a;
}

Editor Styling

<Mentions className="my-editor" triggers={triggers} />
.my-editor {
  padding: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.6;
  min-height: 120px;
}
.my-editor:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
  outline: none;
}

Per-Trigger Colors

triggers={[
  { char: "@", data: users, color: "#dbeafe" },
  { char: "#", data: tags, color: "#fef3c7" },
  { char: "/", data: commands, color: "#dcfce7" },
]}

Data Attributes

CSS Effects

import "@skyastrall/mentions-react/effects.css";

<Mentions className="mentions-gradient-border mentions-animate" triggers={triggers} />