EmojiPicker

Component 16

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds EmojiPicker to your project and fits it to your theme.

Code

How EmojiPicker is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { 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>
  );
}