Emoji Reactions
Badges
Source and install need .
pnpm dlx shadcn@latest add @assembli/emoji-pickerEmoji Picker
An emoji picker that feels native: about 540 emoji inline, search by name, keyword or :shortcode:, a category bar that follows your scroll, sticky headers, recents remembered across visits, six skin tones (🧑💻 → 🧑🏽💻) and a preview footer. Arrow keys move row by row across sections, Enter picks. Inline, or as EmojiPickerPopover on any button.
Props
Other props pass through to the root element.
onSelect
(selection: EmojiSelection) => void
columns
number
Default
9Columns in the grid. Defaults to 9.
height
number
Default
288Height of the scrolling grid in px. Defaults to 288.
recentLimit
number
Default
18How many recents to keep. 0 hides the Recent section. Defaults to 18 (two rows).
skinTone
SkinTone
Controlled skin tone. Uncontrolled, the reader's last pick is remembered across pickers and visits.
defaultSkinTone
SkinTone
Default
0onSkinToneChange
(tone: SkinTone) => void
autoFocus
boolean
Focuses the search field on mount, as when opened from a button.
searchPlaceholder
string
Default
"Search emoji"
| Prop | Type | Default | Description |
|---|---|---|---|
| onSelect | (selection: EmojiSelection) => void | – | |
| columns | number | 9 | Columns in the grid. Defaults to 9. |
| height | number | 288 | Height of the scrolling grid in px. Defaults to 288. |
| recentLimit | number | 18 | How many recents to keep. 0 hides the Recent section. Defaults to 18 (two rows). |
| skinTone | SkinTone | – | Controlled skin tone. Uncontrolled, the reader's last pick is remembered across pickers and visits. |
| defaultSkinTone | SkinTone | 0 | |
| onSkinToneChange | (tone: SkinTone) => void | – | |
| autoFocus | boolean | – | Focuses the search field on mount, as when opened from a button. |
| searchPlaceholder | string | "Search emoji" |
