# Shadcn Inline

> Inline emoji picker

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

## Best for

The default panel with no composed parts, always open in a card and holding one controlled value with no trigger

## Agent notes

- The pick only lands in local `value` state; save it from `onValueChange` or pass `name` so a native form submits it

## When not to use

- A panel whose names and labels follow the reader's language: use [Localized Labels](https://reui.io/components/emoji-picker/c-emoji-picker-8.md) (`get_example("c-emoji-picker-8")`)

## Install

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

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