## Emoji Picker (S—193)

An emoji picker with search, category tabs, a recents row that learns, arrow-key grid navigation and a name preview.

- URL: https://sundaeui.dev/components/emoji-picker
- Category: UI components · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/emoji-picker.json`
- Tags: chat, emoji, grid, search, picker, reactions

Category tabs jump the grid; search filters by name and keyword across every category. Hovering or focusing an emoji shows its name in the footer.
Picks go to the front of Recents. Arrow keys move through the grid as a single tab stop.

### Usage

```tsx
import { EmojiPicker } from '@/components/sundae/emoji-picker'

<EmojiPicker />
```

### Props

- `onPick` (`(emoji: string) => void`): Called with the chosen emoji.
- `columns` (`number`, default `7`): Grid columns.
- `recents` (`string[]`): Starting recents.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Reactions, message composers, status pickers.

### When not to use

- A fixed set of five reactions: show them inline.

### Accessibility

- The grid is a listbox-like group of buttons each labelled with the emoji name.
- One tab stop for the grid; arrows move, Enter picks.
- Search results count is announced.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- Arrow keys: Move through the grid
- Enter: Pick
- Type: Search (from the search field)