saturation/uiLoading...
Installation
pnpm dlx shadcn@latest add @saturation-ui/emoji-pickerTailwind v4 — Source Scanning
The public shadcn registry installs component source into your project. 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. |