Components
Loading preview...
A customizable emoji picker for React, built with shadcn/ui. Features a searchable, scrollable grid of emojis organized by categories, skin tone support, and device-aware rendering. Supports onSelect, className, and disabled props for seamless integration.
npx shadcn@latest add https://21st.dev/r/bankkroll/emoji-pickerimport { EmojiPicker } from "@/components/ui/emoji-picker";
import { Button } from "@/components/ui/button";
import { useState } from "react";
import { X } from "lucide-react";
export default function DemoOne() {
const [selectedEmojis, setSelectedEmojis] = useState<string[]>([]);
const handleEmojiSelect = (emoji: string) => {
setSelectedEmojis((prev) => {
if (prev.includes(emoji)) return prev;
return [emoji, ...prev].slice(0, 4);
});
console.log("Selected emoji:", emoji);
};
const clearEmojis = () => {
setSelectedEmojis([]);
};
return (
<div className="w-[200px]">
<EmojiPicker
onSelect={handleEmojiSelect}
className="border-none bg-background"
/>
{selectedEmojis.length > 0 ? (
<div className="mt-2">
<div className="flex items-center justify-between mb-1">
<span className="text-sm font-medium text-foreground">
Selected Emojis
</span>
<Button
variant="ghost"
size="sm"
onClick={clearEmojis}
className="p-1 hover:bg-accent"
aria-label="Clear emojis"
>
<X className="h-4 w-4" />
</Button>
</div>
<div className="flex gap-1 flex-wrap">
{selectedEmojis.map((emoji, index) => (
<div
key={index}
className="text-lg px-2 py-1 bg-background hover:bg-accent transition-all duration-200 rounded-md"
>
{emoji}
</div>
))}
</div>
</div>
) : (
<p className="mt-2 text-sm text-muted-foreground">
Select an emoji to start!
</p>
)}
</div>
);
}