Components
Mention Input Element

Mention Input Element

An input component for user mentions with autocomplete.

MentionBlock SelectionButtonInline ComboboxMenuPlate ElementPopoverSpinnerTooltip

Installation

Install the following dependencies:

npm install @udecode/plate-mention @udecode/plate-selection @udecode/plate-combobox @ariakit/[email protected] @radix-ui/react-slot @radix-ui/react-tooltip @radix-ui/react-popover

Copy and paste the following code into your project.

Get the code ->

Update the import paths to match your project setup.

Examples

Mention

Get the code ->

＠ Mention

Mention and reference other users or entities within your text using @-mentions.
How to use mentions:
  • Type "@" followed by the name of the user or entity you want to mention.
  • Use arrow keys to navigate through the suggestion list.
  • Press Escape to close the menu.
Try mentioning
BB-8
or
Boba Fett
.
Mention ElementParagraph Element