Emoji Picker

Component

About

A categorized emoji picker panel with tabs for smileys, gestures, hearts and objects, a search filter, and a selectable emoji grid for use in chat or comment inputs.

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 } from "@/components/ui/emoji-picker";

export default function EmojiPickerDemo() {
  const [selected, setSelected] = React.useState<string | null>(null);

  function handleSelect(emoji: string) {
    setSelected(emoji);
  }

  return (
    <div className="flex w-full max-w-sm flex-col items-center gap-4 p-6">
      <div className="flex h-12 w-12 items-center justify-center rounded-lg border border-border bg-card text-2xl">
        {selected ?? "🙂"}
      </div>
      <EmojiPicker onSelect={handleSelect} />
    </div>
  );
}