Installation
Usage
Default Skin
Popover
Footer
Recents
You can show a list of recently used emojis by passing the showRecents prop.
The list is sorted by frecency meaning emojis used more are at the top and 2 emojis with the same amount of uses will be sorted by the last time they were used.
Acknowledgements
The API and style of this component takes inspiration from Frimousse.
API Reference
EmojiPicker.
Root
The root component of the emoji picker.
| Prop | Type | Default |
|---|---|---|
skin? $bindable | enum | 0 |
onSelect? | function | - |
onSkinChange? | function | - |
showRecents? | boolean | - |
recentsKey? | string | - |
maxRecents? | number | - |
children? | Snippet | - |
EmojiPicker.
List
Displays the list of emojis.
| Prop | Type | Default |
|---|---|---|
emptyMessage? | string | No results. |
EmojiPicker.
Viewport
The viewport container for the emoji picker.
EmojiPicker.
Search
The search input for filtering emojis.
Documentation for this component's props can be found at bits-ui Command.Input
EmojiPicker.
Footer
The footer area of the emoji picker.
EmojiPicker.
SkinToneSelector
A button for selecting the emoji skin tone.
| Prop | Type | Default |
|---|---|---|
previewEmoji? | string | 👋 |