Typix LogoTypix
Overlays

MentionUI

`@`-trigger picker for mentioning users or entities, with async search and full render-prop control.

MentionUI pairs with the extension-mention extension. You supply an onSearch function; the component handles the trigger, debounce, keyboard nav, and menu rendering.

Install

npx typix ui add mention

The CLI also installs @typix-editor/extension-mention if needed.

Import

import {
  MentionUI,
  MentionDefaultMenuItem,
} from "@/components/typix/main/mention";

Props

PropTypeDefaultDescription
onSearchMentionSearchFn—Async function that returns suggestions for a query. Required.
onSelect(item: MentionItem) => void—Called when an item is picked.
onMenuOpen() => void—Called when the menu opens.
onMenuClose() => void—Called when the menu closes.
triggerConfig{ trigger?: string; minLength?: number; maxLength?: number; allowSpaces?: boolean }—Override trigger behavior.
includeTriggerbooleantrueWhether the inserted mention keeps the trigger character.
maxSuggestionsnumber10Max items shown.
debounceMsnumber200Debounce delay for onSearch.
renderMenu(props: MentionMenuProps) => JSX.Element | null—Replace the menu container entirely.
renderMenuItem(props: MentionMenuItemProps) => ReactNode—Replace each menu item.
loadingContentReactNode—Shown while onSearch is in-flight.
emptyContentReactNode—Shown when results are empty.
menuPortalTargetHTMLElement | null—Portal target for the menu.
menuClassNamestring—Extra class on the menu container.
disabledbooleanfalseDisable the picker.

Usage

import { MentionUI } from "@/components/typix/main/mention";

async function searchUsers(query: string) {
  const res = await fetch(`/api/users?q=${query}`);
  return (await res.json()) as MentionItem[];
}

<MentionUI
  onSearch={searchUsers}
  onSelect={(user) => console.log("picked", user)}
  debounceMs={150}
  emptyContent={<div className="p-3 text-sm">No users found.</div>}
/>

extension-mention

The behavior extension this UI pairs with.

On this page

InstallImportPropsUsageRelated