# Shadcn Custom Team Emoji

> Custom team emoji

- Type: example, free and open source (MIT)
- Component: [Emoji Picker](https://reui.io/components/emoji-picker.md)
- Page: https://reui.io/components/emoji-picker/c-emoji-picker-5
- 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_example("c-emoji-picker-5")`
- Registry item: https://reui.io/r/styles/base-nova/c-emoji-picker-5.json
- Uses: Avatar, Button, Card, Emoji Picker, Input Group, Item, Separator

## Best for

Image tiles under a logo tab ordered ahead of Frequently used, stored as colon codes and drawn back as images in posts

## Agent notes

- Replace `TEAM_EMOJI` and its `glyph` data URIs with your workspace's uploads; `src` takes any image URL
- A pick stores the first of `shortcodes` as a colon code while `BY_CODE` finds images by `id`, so keep each list starting with its id
- Stored posts keep custom picks as colon codes; render them through `renderText` or readers see the raw codes

## When not to use

- Replies that need only the standard Unicode set with no uploaded images: use [Chat Composer](https://reui.io/components/emoji-picker/c-emoji-picker-2.md) (`get_example("c-emoji-picker-2")`)

## Install

```bash
npx shadcn@latest add @reui/c-emoji-picker-5
```

## About Shadcn Emoji Picker

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

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.