# Shadcn Chat Composer

> Chat composer

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

## Best for

A bubble thread that scrolls to each send, where your follow-ups join your last bubble group

## Agent notes

- `send` only appends to local `groups` state seeded from `THREAD`; post the message to your backend there

## When not to use

- Replies that also offer the team's own uploaded image set: use [Custom Team Emoji](https://reui.io/components/emoji-picker/c-emoji-picker-5.md) (`get_example("c-emoji-picker-5")`)
- A composer that completes a typed colon code from a list under the field: use [Shortcode Suggestions](https://reui.io/components/emoji-picker/c-emoji-picker-6.md) (`get_example("c-emoji-picker-6")`)

## Install

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

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