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 {
EmojiPicker,
EmojiPickerSearch,
EmojiPickerContent,
} from "@/components/ui/emoji-picker";
export function Page() {
return (
<main className="flex h-full min-h-screen w-full items-center justify-center p-4">
<EmojiPicker
className="h-[326px] rounded-lg border shadow-md"
onEmojiSelect={({ emoji }) => {
console.log(emoji);
}}
>
<EmojiPickerSearch />
<EmojiPickerContent />
</EmojiPicker>
</main>
);
}