fma-ds

Emoji Picker

An emoji picker with search, skin tones, recently used emoji, custom emoji and a virtualized grid.

Formsthird-partyMITChangelogRegistry JSON

Overview

<EmojiPicker /> alone renders a trigger and a popover. Compose EmojiPickerTrigger + EmojiPickerContent, or EmojiPickerPanel in place, from EmojiPickerSearch, EmojiPickerCategories, EmojiPickerList, EmojiPickerPreview and EmojiPickerSkinTone.

  • Search: names, keywords and shortcodes.
  • Categories: a category bar that follows the scroll, plus a frequently or recently used section.
  • Data: emojibase, fetched once per page from jsDelivr (dataUrl to self-host, locale for 28 languages) or passed as data. emojiVersion="auto" hides emoji the device can't draw.
  • Value: value/defaultValue/onChange hold the native emoji (or :shortcode: for a custom one). selectionMode="multiple" toggles a list (with max), and onEmojiSelect fires on every pick, for inserting into text.
  • Keyboard: focus stays in the search while the arrows move through the grid (a combobox over an aria-activedescendant listbox); Enter picks.
  • Persistence: recent picks and the tone persist in localStorage (recentStorageKey, skinToneStorageKey; null keeps them in memory).
  • Forms: name submits with a native form.

Every string comes from i18n.

Installation

  1. 1

    Register the @fma-ds namespace in components.json (once)

    components.json
    {  "registries": {    "@fma-ds": "https://ds.fmartinsandre.dev.br/r/{name}.json"  }}
  2. 2

    Add the item

    pnpm dlx shadcn@latest add @fma-ds/emoji-picker

    Files land in components/fma-ds/emoji-picker.tsx; npm and registry dependencies are installed along with them.

Dependencies

npm
cn@^0.5.0lucide-react@^1.61.0react-aria-components@^1.22.1