# Shadcn Emoji Picker

> Open-source shadcn emoji picker components for message composers, reactions, page icons, statuses, and custom team emoji.

- Type: ReUI component, free
- Page: https://reui.io/components/emoji-picker
- Docs (Base UI): https://reui.io/docs/components/base/emoji-picker.md
- Docs (Radix UI): https://reui.io/docs/components/radix/emoji-picker.md
- MCP: `get_component("emoji-picker")`, then `get_examples("emoji-picker")`
- Examples: 8

## 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](https://reui.io/blocks/ai-agents/ai-chat.md)
- Rendering a conversation as bubbles with avatars, names and times: use [Message](https://reui.io/components/message.md) (`get_component("message")`)
- A hue chosen from swatches, a spectrum or a typed hex value: use [Color Picker](https://reui.io/components/color-picker.md) (`get_component("color-picker")`)

## 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`

## Examples

- [Inline](https://reui.io/components/emoji-picker/c-emoji-picker-1.md): Inline emoji picker. Best for the default panel with no composed parts, always open in a card and holding one controlled value with no trigger.
- [Chat Composer](https://reui.io/components/emoji-picker/c-emoji-picker-2.md): Chat composer. Best for a bubble thread that scrolls to each send, where your follow-ups join your last bubble group.
- [Message Reactions](https://reui.io/components/emoji-picker/c-emoji-picker-3.md): Message reactions. Best for reaction pills split by skin tone with counts, plus a row of 6 one click reactions composed above the search.
- [Page Icon](https://reui.io/components/emoji-picker/c-emoji-picker-4.md): Page icon. Best for a large stored glyph that is its own trigger, swapping to an Add icon button once removed, echoed in the breadcrumb.
- [Custom Team Emoji](https://reui.io/components/emoji-picker/c-emoji-picker-5.md): Custom team emoji. Best for image tiles under a logo tab ordered ahead of Frequently used, stored as colon codes and drawn back as images in posts.
- [Shortcode Suggestions](https://reui.io/components/emoji-picker/c-emoji-picker-6.md): Shortcode suggestions. Best for a combobox list of 5 ranked matches driven by arrow keys, Tab or Enter, plus an instant swap of a closed colon code.
- [Workplace-Safe Set](https://reui.io/components/emoji-picker/c-emoji-picker-7.md): Workplace-safe set. Best for browse tabs without nature, food, travel or flags for a textarea that spaces each pick off its neighbors, with Undo after posting.
- [Localized Labels](https://reui.io/components/emoji-picker/c-emoji-picker-8.md): Localized data and labels. Best for a language select that swaps the emoji data and the picker's labels and clears the search, in a panel fitted to the card inset.

Every ReUI item has a twin like this one; the index is https://reui.io/llms.txt. Agents with the ReUI MCP (https://reui.io/docs/mcp) get the same guidance from the getters named above.