saturation/uiLoading...
Installation
pnpm dlx shadcn@latest add https://ui.saturation.io/r/emoji-picker.jsonTailwind v4 — Source Scanning
Saturation UI copies component source into your project via the shadcn registry (no npm package). If Tailwind v4 isn't scanning your components directory, add this to your CSS entry file:
@source "../components";This ensures all utility classes in CVA variants and data attribute selectors are included in your build.
Usage
import {
EmojiPicker,
EmojiPickerSearch,
EmojiPickerContent,
EmojiPickerFooter,
} from "@/components/ui/emoji-picker"<EmojiPicker onEmojiSelect={(emoji) => console.log(emoji)}>
<EmojiPickerSearch placeholder="Search emoji…" />
<EmojiPickerContent />
<EmojiPickerFooter />
</EmojiPicker>Examples
Popover
Loading...
Emoji picker inside a popover trigger.
Skin Tones
Loading...
Custom footer with skin tone selector.
Powered by Frimousse
This component wraps Frimousse — a headless, composable emoji picker by Liveblocks. Emoji data loads asynchronously from the Emojibase CDN.
With Popover
For trigger-based usage, compose with the Popover component — see the Popover example.
API Reference
EmojiPicker
| Prop | Type | Default | Description |
|---|---|---|---|
onEmojiSelect | (emoji: Emoji) => void | — | Callback when an emoji is selected. |
locale | string | "en" | Language locale for emoji labels. |
skinTone | "none" | "light" | "medium-light" | "medium" | "medium-dark" | "dark" | "none" | Skin tone variation for human emojis. |
columns | number | 9 | Number of columns in the emoji grid. |
className | string | — | Additional CSS classes. |
EmojiPickerSearch
| Prop | Type | Default | Description |
|---|---|---|---|
placeholder | string | — | Placeholder text for the search input. |
className | string | — | Additional CSS classes. |
EmojiPickerContent
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes for the viewport. |
EmojiPickerFooter
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes. |
Accessibility
Keyboard Interactions
| Key | Description |
|---|---|
ArrowUp/Down/Left/Right | Navigate between emojis. |
Enter | Select the focused emoji. |
Tab | Move focus between search and emoji grid. |