Emoji Picker

Component 1

About

Emoji picker on frimousse: the full emoji set by category, search, skin tones, keyboard navigation and a hover preview.

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