A self-contained emoji picker with 560+ emoji across 8 categories, keyword search, recently-used tracking, skin tone selection, and full arrow-key grid navigation.
"use client";
import * as React from "react";
import { SmilePlus } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import {
EmojiPicker,
EmojiPickerSearch,
EmojiPickerCategories,
EmojiPickerList,
EmojiPickerFooter,
EmojiPickerSkinTone,
} from "@/components/ui/emoji-picker";
export default function EmojiPickerDemo() {
const [open, setOpen] = React.useState(false);
const [reaction, setReaction] = React.useState("👍");
return (
<div className="flex flex-col items-center gap-3">
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<Button
type="button"
variant="outline"
size="icon"
aria-label="Pick an emoji"
>
<SmilePlus />
</Button>
</PopoverTrigger>
<PopoverContent align="start" className="w-auto">
<EmojiPicker
recentKey="emoji-picker-demo-recent"
onEmojiSelect={(emoji) => {
setReaction(emoji);
setOpen(false);
}}
>
<EmojiPickerSearch />
<EmojiPickerCategories />
<EmojiPickerList />
<EmojiPickerFooter>
<EmojiPickerSkinTone />
</EmojiPickerFooter>
</EmojiPicker>
</PopoverContent>
</Popover>
<span className="text-3xl leading-none">{reaction}</span>
</div>
);
}
Part of Hirael — browse the full library on 21st.dev.