ui
XGitHub

Emoji Picker

A component that allows users to pick an emoji.

Docs
emoji-picker-demo.tsx
"use client"
 
import { toast } from "sonner"
 
import {
	EmojiPicker,
	EmojiPickerContent,
	EmojiPickerEmpty,
	EmojiPickerList,
	EmojiPickerLoading,
	EmojiPickerSearch,
} from "@/components/ui/emoji-picker"
 
export function EmojiPickerDemo() {
	return (
		<EmojiPicker
			onEmojiSelect={({ emoji, label }) => {
				toast.custom(() => (
					<p className="flex items-center gap-2 text-sm">
						<span className="text-lg">{emoji}</span>
						{label}
					</p>
				))
			}}
		>
			<EmojiPickerSearch />
			<EmojiPickerContent>
				<EmojiPickerLoading />
				<EmojiPickerEmpty>No results</EmojiPickerEmpty>
				<EmojiPickerList />
			</EmojiPickerContent>
		</EmojiPicker>
	)
}

About

The Emoji Picker is built on top of frimousse, which is created by liveblocks.

Installation

npx shadcn@latest add https://9ui.dev/r/emoji-picker.json

Usage

Imports
import {
	EmojiPicker,
	EmojiPickerContent,
	EmojiPickerEmpty,
	EmojiPickerList,
	EmojiPickerLoading,
	EmojiPickerSearch,
} from "@/components/ui/emoji-picker"
Anatomy
<EmojiPicker>
	<EmojiPickerSearch />
	<EmojiPickerContent>
		<EmojiPickerLoading />
		<EmojiPickerEmpty />
		<EmojiPickerList />
	</EmojiPickerContent>
</EmojiPicker>

Examples

Popover

emoji-picker-popover.tsx
import * as React from "react"
import { toast } from "sonner"
 
import { Button } from "@/components/ui/button"
import {
	EmojiPicker,
	EmojiPickerContent,
	EmojiPickerEmpty,
	EmojiPickerList,
	EmojiPickerLoading,
	EmojiPickerSearch,
} from "@/components/ui/emoji-picker"
import {
	Popover,
	PopoverContent,
	PopoverTrigger,
} from "@/components/ui/popover"
 
export function EmojiPickerPopoverDemo() {
	const [open, setOpen] = React.useState(false)
	const [emoji, setEmoji] = React.useState<string | undefined>(undefined)
 
	return (
		<Popover open={open} onOpenChange={setOpen}>
			<PopoverTrigger
				render={(props) => (
					<Button {...props} variant="outline" size="icon">
						{emoji ? emoji : "👇"}
					</Button>
				)}
			/>
			<PopoverContent className="rounded-md p-0 outline-offset-0">
				<EmojiPicker
					className="border-none"
					onEmojiSelect={({ emoji, label }) => {
						setEmoji(emoji)
						toast.custom(() => (
							<p className="flex items-center gap-2 text-sm">
								<span className="text-lg">{emoji}</span>
								{label}
							</p>
						))
					}}
				>
					<EmojiPickerSearch />
					<EmojiPickerContent>
						<EmojiPickerLoading />
						<EmojiPickerEmpty>No results</EmojiPickerEmpty>
						<EmojiPickerList />
					</EmojiPickerContent>
				</EmojiPicker>
			</PopoverContent>
		</Popover>
	)
}