About
A lightweight, unstyled, and composable emoji picker for React.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Emoji Picker to your project and fits it to your theme.
Code
How Emoji Picker is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
"use client";
import * as React from "react";
import { Button } from "@/components/ui/button";
import {
EmojiPicker,
EmojiPickerSearch,
EmojiPickerContent,
EmojiPickerFooter,
} from "@/components/ui/emoji-picker";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
export function Page() {
const [isOpen, setIsOpen] = React.useState(false);
return (
<main className="flex h-full min-h-screen w-full items-center justify-center p-4">
<Popover onOpenChange={setIsOpen} open={isOpen}>
<PopoverTrigger asChild>
<Button>Open emoji picker</Button>
</PopoverTrigger>
<PopoverContent className="w-fit p-0">
<EmojiPicker
className="h-[342px]"
onEmojiSelect={({ emoji }) => {
setIsOpen(false);
console.log(emoji);
}}
>
<EmojiPickerSearch />
<EmojiPickerContent />
<EmojiPickerFooter />
</EmojiPicker>
</PopoverContent>
</Popover>
</main>
);
}