Atelier UI

Search components…

Search components…

Emoji Picker

Emoji grid popover with category tabs, search, skin-tone selector, recent row and keyboard grid navigation.

Edit in sandbox

Copy a prompt for your AI coding tool with the source, dependencies and usage

Props

EmojiPickerProps

Also accepts all props of Omit<React.ComponentProps<"div">, "onSelect">

PropTypeDefaultDescription
onSelect(emoji: string) => void—Called with the chosen character (skin tone applied)
defaultRecentstring[]—Characters to seed the recent row with
closeOnSelectboolean—Close the popover after picking
align"start" | "end"——
triggerLabelReact.ReactNode—Custom trigger content
defaultOpenboolean—Opens on first render without moving focus, handy for static previews

Install

$ npx shadcn@latest add https://chromotion.dev/r/emoji-picker.json

More like this