# Shadcn Shortcode Suggestions

> Shortcode suggestions

- 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-6
- 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-6")`
- Registry item: https://reui.io/r/styles/base-nova/c-emoji-picker-6.json
- Uses: Avatar, Button, Card, Emoji Picker, Input Group, Item

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

## Agent notes

- `DRAFT` seeds the field mid shortcode so suggestions show on load; start from an empty string and drop the `useEffect` that places its caret
- Suggestions search raw `data.emojis` from `useEmojiPickerData`, so they skip the grid's check that hides emoji the device cannot draw
- `post` only appends to local `comments` state; send the comment to your API there

## When not to use

- A composer that inserts only from the popover grid, with no typed codes: 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-6
```

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