Emoji picker

import { EmojiPicker, EmojiPickerPopover } from "@/components/ui/emoji-picker";

import { EmojiPicker } from "@/components/ui/emoji-picker";

export function Example() {
  return <EmojiPicker onPick={({ emoji, label }) => console.log(emoji, label)} />;
}

npx shadcn@latest add https://sdk-components.thesqd.com/r/emo-suggester.json

EmojiPicker                      (frimousse Root — data, virtualised grid, keyboard nav)
├── Input search                 (the visible query field)
├── Recent row                   (up to `columns` recent picks — Popular until there are any)
├── Viewport                     (nothing typed; scroll-fade)
│   ├── Loading → Spinner
│   └── List                     (sticky category headers, a ghost Button per emoji)
├── Search results               (something typed; ONE grid, scroll-fade, arrows + Enter)
│   ├── the `suggester`'s answers for the query read as a phrase, first
│   ├── then name and keyword matches, each emoji once
│   └── "No emoji match" only when both came back empty
└── Footer
    ├── Active emoji + label     (hovered or keyboard-selected)
    └── Skin tone Button         (cycles the five tones and none)

EmojiPickerPopover               (Popover + EmojiPicker variant="plain", closes on pick)
└── trigger={<Button … />}

Recent emoji and the skin tone are uncontrolled unless you pass
`recent` / `onRecentChange` and `skinTone` / `onSkinToneChange` —
store them in a user's settings to make them follow the person.
`addRecentEmoji(recent, emoji)` is exported for keeping your own list.

createEmoSuggester(options)      (emo-suggester.ts, a separate install)
└── → EmojiSuggester             { suggest(query, { skinTone, limit }) }