Components
Emoji Input Element

Emoji Input Element

Renders an emoji input element with search functionality and emoji insertion.

API ReferenceBlock SelectionButtonInline ComboboxMenuPlate ElementPopoverTooltip
Get the code ->

Callout

Explore the versatility of callouts with editable emojis:
Pro tip: Click the emoji to change it! Try "🔍" for insights.
Caution: Sensitive data ahead. Consider using "🔒" for security.
Error: Action forbidden. Maybe "❌" fits better?
Great job! "🎉" could work for celebrations too.
Callouts support rich formatting including italics and more!
Callouts enhance your document's readability and visual appeal.

Installation

Install the following dependencies:

npm install @udecode/plate-emoji @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.

EditorEmoji Picker