Shadcn Emoji Picker: Search, Skin Tones, Custom Emoji and Reactions

Browse 8 shadcn emoji picker components with search and shortcodes, skin tones, frequently used and custom team emoji, category tabs and localized data.

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

When to use

Message composers, replies and notes that insert emoji at the caret of a text field
Reactions on posts and messages, added from a popover beside the reaction pills
A single stored emoji such as a page icon or a profile status, kept inline or behind a trigger

When not to use

A finished assistant conversation screen around a composer: use the AI Chat blocks
Rendering a conversation as bubbles with avatars, names and times: use the Message component
A hue chosen from swatches, a spectrum or a typed hex value: use the Color Picker component

Agent notes

Left unset, value keeps each pick as the picker's value and EmojiPickerTrigger draws it in place of its default smiley; insert-only pickers pass null
By default every picker on the origin shares recent emoji and skin tone through localStorage; scope them with recentStorageKey and skinToneStorageKey

Markdownhttps://reui.io/components/emoji-picker.md

MCPget_component("emoji-picker")

Installnpx shadcn@latest add @reui/emoji-picker

Full index for agents:llms.txtReUI MCP setup

Shadcn Emoji Picker: Insert, React and Choose an Icon

ReUI Emoji Picker is a custom shadcn component for choosing emoji from a searchable grid, in a popover or in place. It is not part of the base shadcn/ui library, and it is built on the shadcn Button, Input Group and Popover with no npm dependency.

The emoji, their names and keywords come from emojibase, fetched once per page from a pinned release and shared by every picker, or passed in for a self-hosted or offline app. Only the rows in view render, so a thread with a reaction picker on every message stays fast.

The examples cover the places an emoji picker lands: a message composer that inserts at the caret, reaction pills with counts, a document icon, uploaded team emoji and a shortcode autocomplete with no picker open. Others restrict the set for a workplace tool and switch the data and labels to German, French or Japanese.

What is Shadcn Emoji Picker?

An emoji picker turns a list of about 1,900 emoji into something a person can scan and search in a second. Shadcn Emoji Picker is 12 composable parts and 2 hooks: a root, a trigger and a popover, an inline panel, a header and a footer, a search, a skin tone control, category tabs, the grid, a preview and a value readout.

A pick hands back the native emoji with the skin tone applied, ready to insert into text or store in a database column, or :shortcode: for a custom emoji. Give the root a value and it becomes a field that marks its choice and submits with a form; add multiple and picks toggle in and out of a list.

Data, languages and unsupported emoji

locale loads names, keywords and category labels in 28 languages, so search works in German, Japanese or Portuguese, and GitHub or Slack shortcodes such as :thumbsup: search in every language. The browser caches the pinned files, and dataUrl or data moves the source to your own origin for a strict Content Security Policy.

Older systems draw newer emoji as empty boxes. The picker draws one emoji of each Unicode version on a canvas, hides the versions the device cannot show, and hides country flags where the system font has none, as on Windows. emojiVersion fixes the cutoff instead.

Shadcn Emoji Picker Features

Search and shortcodes. Ranks by name, shortcode and keyword, ignores colons and accents, and highlights the best match so Enter picks it. A pasted emoji finds itself in any tone.
Skin tones. One tone for every emoji that takes one, chosen from a shadcn dropdown menu, remembered in localStorage and shared live with every picker and tab.
Frequently used. A recent section ordered by use count or last use, stored locally or controlled through recent and onRecentChange to sync with an account.
Custom team emoji. Image emoji with their own tab and label, searchable by shortcode and stored as :shortcode:, the way Slack and Discord keep them in text.
Virtualized grid. Only the rows in view render, with sticky category headers, so a page of reaction pickers or a library of thousands of custom emoji stays cheap.
Value, multiple and forms. value marks the choice in the grid, multiple with max picks a capped list, and name submits it with a native form that resets to its default.
Composable layout. Tabs above or below the grid, with or without search, skin tone or preview, at 3 sizes and any column count, inline or in a popover.
Every shadcn style. The search is the default shadcn input, the tabs are ghost icon buttons and the cells take the icon button radius in all 8 styles, light and dark.

Accessibility and keyboard

The search is a combobox over one listbox of category groups, with the highlighted emoji as its active descendant, so a screen reader announces each emoji by name while focus stays in the search. Left and Right move the caret until the arrows enter the grid, and Escape closes the popover.

Category tabs are a tablist with roving focus, the skin tone is a menu of radio items, result counts are announced, and focus returns to the trigger on close, or to the textarea you name with returnFocus.

Put the trigger inside Shadcn Input Group for a composer or a status field, and wrap a form field in Shadcn Field for a label, a hint and an error. The grid opens in Shadcn Popover, so it follows your theme.

For reactions, pair it with Shadcn Toggle pills that carry a count, and for a chat, with Shadcn Bubble and Shadcn Message. The shortcode autocomplete builds on the same data with Shadcn Item rows and no picker at all.

The AI Chat blocks are the assembled conversation screens around a composer, 13 Pro layouts. The Emoji Picker docs list every part, prop and helper.

AI Chat Blocks in ReUI Pro

The free examples above pair with 13 production ready ai chat blocks in ReUI Pro, complete sections built on the same primitives and ready to copy into your app.

AI Chat (13 blocks)Conversation surfaces for AI products, from full chat shells to embeddable threads, sheets, and launchers.

Browse all AI & Agents blocks

Frequently Asked Questions

How is this different from emoji-mart or emoji-picker-react?

Both ship their own styling and render the whole list, so theming means fighting their CSS and a long list costs every visitor. Emoji Picker is copied into your project as shadcn parts that follow your theme, renders only the rows in view, and adds custom emoji, shortcodes and a frequently used list that you can control.

Where does the emoji data come from?

From emojibase, MIT licensed, fetched as JSON from a pinned release on jsDelivr the first time a picker opens and shared by every picker on the page. Pass dataUrl to serve the files from your own origin, or data to bundle them and skip the request.

Why do some emoji show as empty boxes, and how is that handled?

An emoji newer than the system font draws as an empty box. With the default emojiVersion of auto, the picker probes what the device can draw and hides the rest, country flags included on Windows. A number sets a fixed version for every device.

How do I insert the emoji at the cursor in a textarea?

Read the textarea's selectionStart and selectionEnd in onEmojiSelect, splice the value in, and pass the textarea as returnFocus so focus goes back to it. The composer example does exactly that, and Shift plus click inserts several without closing.

Can I add my own emoji?

Yes. Pass customEmojis with an id, a label and an image URL, and customCategories to name their tab. A pick stores :id:, so render your messages by swapping those tokens for the images, as the custom team emoji example does.

How do I keep frequently used emoji across devices?

By default they live in localStorage under one key, shared by every picker on the origin. Pass recent and onRecentChange to load and save the list from your own backend instead, or recentStorageKey as null to keep it in memory.

Is it safe to server render in Next.js?

Yes. Stored tones and recent emoji are read only on the client, the server renders the defaults, and the grid fills in after the data loads, so the markup never depends on the visitor.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.