Emoji Picker

Pro

Emoji panel with search, category tabs, a recently used row and long-press skin tones. Picking an emoji can lift it from the grid and fly it to where it’s going.

Preview

Installation

npx @lumioui/cli add pro/emoji-picker

Usage

import { EmojiPicker } from "@/components/ui/emoji-picker/emoji-picker";
<EmojiPicker />

Examples

Mood journal

A daily mood journal.

Message reactions

Reacting to a message in a group chat.

Status emoji

"Set a status" in a team chat app.

API reference

Prop Type Default
onEmojiSelect (event: EmojiSelectEvent) => void

Fires with the picked emoji (tone applied).

 —
categories EmojiCategory[]

Emoji data. Defaults to the built-in ~330-emoji set.

 EMOJI_CATEGORIES
recent string[]

Controlled recent emoji (most recent first).

 —
defaultRecent string[]

Uncontrolled initial recents.

 []
onRecentChange (recent: string[]) => void

Fires with the updated recents after a pick.

 —
maxRecent number

Recent row length. Default 16 (two rows).

 16
skinTone SkinTone

Controlled skin tone.

 —
defaultSkinTone SkinTone

Uncontrolled initial skin tone. Default "default".

 "default"
onSkinToneChange (tone: SkinTone) => void

Fires when a tone is picked from the long-press popover.

 —
searchable boolean

Show the search field. Default true.

 true
columns number

Grid columns. Default 8.

 8
height number

Panel height in points. Default 360.

 360
flyTo FlightTarget

Where a pick flies to — a view ref, or a function choosing one per emoji. When set, onEmojiSelect fires as the emoji lands there.

 —
flySize number

Glyph size in points at the destination (it lands at this size). Default 28.

 CELL_GLYPH
className string —