Emoji Picker

Install

pnpm dlx shadcn@latest add @vegastack/emoji-picker

Usage

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

<EmojiPicker onValueChange={(emoji) => console.log(emoji)} />;

How it works

EmojiPicker composes our Popover (trigger + floating panel), a search Input, and a scrollable grid of icon Buttons. Selecting an emoji fires onValueChange(emoji) with the character and (by default) closes the panel.

The emoji data is a curated, embedded set (EMOJI) — a few hundred of the most common emoji grouped into nine categories: Smileys, People, Animals, Food, Activities, Travel, Objects, Symbols, and Flags. It is intentionally not the full Unicode set: keeping the data inline makes the component self-contained and zero-dependency (no heavy emoji library, no sprite sheets). Search matches each emoji's name and keywords. To support more emoji, extend or replace the exported EMOJI record.

Examples

Insert into a field

Append the picked emoji to a text input — the picker is presentational, so the parent owns the value.

Custom trigger

Pass a button-like element as trigger (composed via Base UI's render) to replace the default ghost icon button. The forwarded ref lands on the trigger button.

Multi-pick (keep open)

Set closeOnSelect={false} so the panel stays open after each selection — useful for building a reaction bar or inserting several emoji in a row.

<EmojiPicker
  closeOnSelect={false}
  onValueChange={(emoji) => setReactions((prev) => [...prev, emoji])}
/>

Side and labels

Use side to place the panel relative to the trigger, and triggerLabel / searchPlaceholder to customise the trigger's aria-label and the search placeholder copy.

<EmojiPicker
  side="right"
  triggerLabel="Insert symbol"
  searchPlaceholder="Find a symbol…"
  onValueChange={insert}
/>

Custom panel class

className is forwarded to the popover panel, so you can override its width (or other layout) without touching the trigger. Here the default w-72 panel is widened to w-80.

<EmojiPicker className="w-80" onValueChange={insert} />

Empty state

When the search query matches nothing, the grid is replaced by a "No emoji found." message and a polite role="status" region announces the result count (or the empty state) as the query changes. This is owned by the picker's internal search state, so the example below is live — open it and type a non-matching query like zzz.

API Reference

EmojiPicker

EmojiEntry

A single entry in the EMOJI dataset — the rendered character, its accessible name, and optional search keywords.

EmojiEntry

EmojiCategory

The category keys of the EMOJI record, rendered as section headings in their declared order. (EmojiCategory is a string-union type alias, so the values are listed by hand.)

EMOJI

The exported, curated emoji dataset you extend or replace to support more emoji. It is a Record<EmojiCategory, EmojiEntry[]> — each category key maps to an ordered array of EmojiEntry objects.

Accessibility

• The trigger is a real <button>; Enter / Space open the popover and focus moves into the panel.
• Each emoji is a focusable <button> with an aria-label (the emoji name) and title, so the grid is screen-reader navigable and keyboard-operable.
• The search field is a labelled <input type="search">; typing filters the grid live, and a polite role="status" announces result counts or the empty state when nothing matches.
• Focus is always visible: the default ghost trigger keeps the browser's native focus outline, the search field re-colours its border to the ring token (focus:border-ring/(--alpha-tint-border)), and each emoji button highlights with a focus-visible:bg-accent background — never outline: none.
• Dismiss is built in (via Popover) — clicking outside the panel or pressing Esc closes it and returns focus to the trigger.

Do / Don't