Emoji Picker

The Emoji Picker component provides a user-friendly interface for browsing and selecting emojis. It includes search functionality, skin tone variants, categorized emoji lists, and is built using the Frimousse library by Liveblocks.

Installation

CLI
Manual

npx shadcn@latest add @eo-n/emoji-picker

Install dependencies

First, install the Frimousse library:

npm install frimousse

Copy component code

Copy and paste the following code into your project at components/ui/emoji-picker.tsx:

"use client";

import * as React from "react";
import {
  EmojiPicker as EmojiPickerPrimitive,
  type EmojiPickerListCategoryHeaderProps,
  type EmojiPickerListEmojiProps,
  type EmojiPickerListProps,
  type EmojiPickerListRowProps,
  type EmojiPickerRootProps,
  type EmojiPickerSearchProps,
  type EmojiPickerSkinToneProps,
  type EmojiPickerSkinToneSelectorProps,
  type EmojiPickerViewportProps,
} from "frimousse";
import { LoaderIcon, SearchIcon } from "lucide-react";
import { cn } from "@/lib/utils";
import { buttonVariants } from "@/components/ui/button";

function EmojiPicker({
  className,
  style,
  columns,
  ...props
}: EmojiPickerRootProps) {
  return (
    <EmojiPickerPrimitive.Root
      data-slot="emoji-picker"
      columns={columns}
      className={cn(
        "bg-card text-card-foreground isolate flex h-[368px] w-fit flex-col gap-1 overflow-hidden rounded-lg border p-2 group-[[data-slot=popover-content]]:border-none group-[[data-slot=popover-content]]:bg-transparent",
        className
      )}
      style={{
        "--columns": `${columns}`,
        ...style,
      } as React.CSSProperties}
      {...props}
    />
  );
}

function EmojiPickerSearch({ className, ...props }: EmojiPickerSearchProps) {
  return (
    <div className="dark:bg-input/30 border-input relative z-10 flex h-9 w-full min-w-0 flex-none items-center gap-2 rounded-md border bg-transparent py-1 pr-2.5 pl-7.5 transition-[color,box-shadow]">
      <SearchIcon className="text-muted-foreground pointer-events-none absolute top-1/2 left-2 size-4 shrink-0 -translate-y-1/2" />
      <EmojiPickerPrimitive.Search
        data-slot="emoji-picker-search"
        className={cn(
          "placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground focusable size-full appearance-none text-base outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
          className
        )}
        {...props}
      />
    </div>
  );
}

function EmojiPickerContent({
  className,
  children,
  ...props
}: EmojiPickerViewportProps) {
  return (
    <EmojiPickerPrimitive.Viewport
      data-slot="emoji-picker-content"
      className={cn("relative flex-1 outline-hidden", className)}
      {...props}
    >
      <EmojiPickerPrimitive.Loading className="text-muted-foreground absolute inset-0 flex items-center justify-center">
        <LoaderIcon className="pointer-events-none size-4 shrink-0 animate-spin" />
      </EmojiPickerPrimitive.Loading>
      <EmojiPickerPrimitive.Empty className="text-muted-foreground absolute inset-0 flex items-center justify-center text-sm">
        No emojis found
      </EmojiPickerPrimitive.Empty>
      {children}
      <EmojiPickerList />
    </EmojiPickerPrimitive.Viewport>
  );
}

function EmojiPickerList({
  className,
  children,
  ...props
}: EmojiPickerListProps) {
  return (
    <EmojiPickerPrimitive.List
      data-slot="emoji-picker-list"
      className={cn("w-fit pb-1.5 select-none", className)}
      components={{
        CategoryHeader: EmojiPickerCategoryHeader,
        Row: EmojiPickerRow,
        Emoji: EmojiPickerEmoji,
      }}
      {...props}
    >
      {children}
    </EmojiPickerPrimitive.List>
  );
}

function EmojiPickerSkinToneSelector({
  className,
  emoji = "👋",
  ...props
}: EmojiPickerSkinToneSelectorProps) {
  return (
    <EmojiPickerPrimitive.SkinToneSelector
      data-slot="emoji-picker-skin-tone-selector"
      className={cn(
        buttonVariants({
          variant: "outline",
          size: "icon",
          className: "text-lg",
        }),
        className
      )}
      title="Change skin tone"
      emoji={emoji}
      {...props}
    />
  );
}

function EmojiPickerFooter({
  className,
  children,
  ...props
}: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="emoji-picker-footer"
      className={cn(
        "before:bg-border relative z-10 hidden min-h-11 w-full min-w-0 flex-none items-center gap-1 py-2 pb-0 before:absolute before:-inset-x-2 before:top-0 before:h-px before:w-[calc(100%_+_16px)] before:content-[''] sm:flex",
        className
      )}
      {...props}
    >
      <EmojiPickerPrimitive.ActiveEmoji>
        {({ emoji }) =>
          emoji ? (
            <>
              <div className="flex size-8 flex-none items-center justify-center text-xl">
                {emoji.emoji}
              </div>
              <span className="text-card-foreground truncate text-xs font-medium">
                {emoji.label}
              </span>
            </>
          ) : (
            <span className="text-muted-foreground ml-2 truncate text-xs font-medium">
              Select an emoji…
            </span>
          )
        }
      </EmojiPickerPrimitive.ActiveEmoji>
      <div className="ml-auto flex gap-1">{children}</div>
    </div>
  );
}

function EmojiPickerSkinTone({
  emoji = "👋",
  className,
  children,
  ...props
}: Omit<EmojiPickerSkinToneProps, "children"> & React.ComponentProps<"div">) {
  return (
    <div className={cn("bg-card flex items-center rounded-md", className)}>
      <EmojiPickerPrimitive.SkinTone emoji={emoji} {...props}>
        {({ setSkinTone, skinToneVariations, skinTone: activeSkinTone }) =>
          skinToneVariations.map(({ skinTone, emoji }) => (
            <button
              key={skinTone}
              onClick={() => setSkinTone(skinTone)}
              className={cn(
                buttonVariants({
                  variant: "ghost",
                  size: "icon",
                  className: "text-lg",
                }),
                skinTone === activeSkinTone && "bg-accent border"
              )}
            >
              {emoji}
            </button>
          ))
        }
      </EmojiPickerPrimitive.SkinTone>
      {children}
    </div>
  );
}

export {
  EmojiPicker,
  EmojiPickerSearch,
  EmojiPickerContent,
  EmojiPickerList,
  EmojiPickerSkinToneSelector,
  EmojiPickerFooter,
  EmojiPickerSkinTone,
};

Update imports

Update the import paths to match your project setup.

Usage

Import the emoji picker components:

import {
  EmojiPicker,
  EmojiPickerContent,
  EmojiPickerSearch,
} from "@/components/ui/emoji-picker";

<EmojiPicker
  onEmojiSelect={({ emoji }) => {
    console.log(emoji);
  }}
>
  <EmojiPickerSearch />
  <EmojiPickerContent />
</EmojiPicker>

API Reference

EmojiPicker

The root container component for the emoji picker. Props

Prop	Type	Default	Description
`onEmojiSelect`	`(data: { emoji: string; label: string }) => void`	-	Callback when an emoji is selected
`columns`	`number`	`8`	Number of emoji columns to display
`defaultSkinTone`	`number`	`0`	Default skin tone (0-5)

EmojiPickerSearch

Search input for filtering emojis by name or keyword. Props Extends standard input props.

Prop	Type	Description
`placeholder`	`string`	Placeholder text for the search input

EmojiPickerContent

Viewport container for the scrollable emoji list. Props Extends standard div props.

EmojiPickerFooter

Optional footer for displaying active emoji info and controls. Props Extends standard div props.

EmojiPickerSkinToneSelector

Button to open skin tone selection. Props

Prop	Type	Default	Description
`emoji`	`string`	`"👋"`	Emoji to display on the selector button

EmojiPickerSkinTone

Inline skin tone selector with all variants. Props

Prop	Type	Default	Description
`emoji`	`string`	`"👋"`	Emoji to show skin tone variants for

Examples

Basic Emoji Picker

Simple emoji picker with search:

import {
  EmojiPicker,
  EmojiPickerContent,
  EmojiPickerSearch,
} from "@/components/ui/emoji-picker";

export default function EmojiPickerDemo() {
  return (
    <EmojiPicker
      onEmojiSelect={({ emoji, label }) => {
        console.log(`Selected: ${emoji} ${label}`);
      }}
    >
      <EmojiPickerSearch />
      <EmojiPickerContent />
    </EmojiPicker>
  );
}

Embed the emoji picker in a popover for better UX:

import { Button } from "@/components/ui/button";
import {
  EmojiPicker,
  EmojiPickerContent,
  EmojiPickerFooter,
  EmojiPickerSearch,
  EmojiPickerSkinToneSelector,
} from "@/components/ui/emoji-picker";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";

export default function EmojiPickerPopover() {
  return (
    <Popover>
      <PopoverTrigger render={<Button>Open emoji picker</Button>} />
      <PopoverContent className="w-fit p-0">
        <EmojiPicker
          onEmojiSelect={({ emoji, label }) => {
            console.log(`Selected: ${emoji} ${label}`);
          }}
        >
          <EmojiPickerSearch />
          <EmojiPickerContent />
          <EmojiPickerFooter>
            <EmojiPickerSkinToneSelector />
          </EmojiPickerFooter>
        </EmojiPicker>
      </PopoverContent>
    </Popover>
  );
}

With State Management

Manage selected emoji with React state:

import { useState } from "react";
import { Button } from "@/components/ui/button";
import {
  EmojiPicker,
  EmojiPickerContent,
  EmojiPickerSearch,
} from "@/components/ui/emoji-picker";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";

export default function EmojiPickerWithState() {
  const [selectedEmoji, setSelectedEmoji] = useState("");
  const [open, setOpen] = useState(false);

  return (
    <div className="flex flex-col gap-4">
      <Popover open={open} onOpenChange={setOpen}>
        <PopoverTrigger render={<Button>Select Emoji</Button>} />
        <PopoverContent className="w-fit p-0">
          <EmojiPicker
            onEmojiSelect={({ emoji }) => {
              setSelectedEmoji(emoji);
              setOpen(false);
            }}
          >
            <EmojiPickerSearch placeholder="Search emojis..." />
            <EmojiPickerContent />
          </EmojiPicker>
        </PopoverContent>
      </Popover>
      {selectedEmoji && (
        <div className="text-center">
          <p className="text-4xl">{selectedEmoji}</p>
          <p className="text-sm text-muted-foreground mt-2">
            Selected emoji
          </p>
        </div>
      )}
    </div>
  );
}

Custom Columns

Adjust the number of emoji columns:

import {
  EmojiPicker,
  EmojiPickerContent,
  EmojiPickerSearch,
} from "@/components/ui/emoji-picker";

export default function EmojiPickerCustomColumns() {
  return (
    <EmojiPicker
      columns={10}
      onEmojiSelect={({ emoji }) => console.log(emoji)}
    >
      <EmojiPickerSearch />
      <EmojiPickerContent />
    </EmojiPicker>
  );
}

With Skin Tone Footer

Show active emoji info and skin tone selector in footer:

import {
  EmojiPicker,
  EmojiPickerContent,
  EmojiPickerFooter,
  EmojiPickerSearch,
  EmojiPickerSkinToneSelector,
} from "@/components/ui/emoji-picker";

export default function EmojiPickerWithFooter() {
  return (
    <EmojiPicker onEmojiSelect={({ emoji }) => console.log(emoji)}>
      <EmojiPickerSearch placeholder="Search..." />
      <EmojiPickerContent />
      <EmojiPickerFooter>
        <EmojiPickerSkinToneSelector emoji="👋" />
      </EmojiPickerFooter>
    </EmojiPicker>
  );
}

In a Form

Use the emoji picker as part of a form:

import { useState } from "react";
import { Button } from "@/components/ui/button";
import {
  EmojiPicker,
  EmojiPickerContent,
  EmojiPickerSearch,
} from "@/components/ui/emoji-picker";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";

export default function EmojiPickerInForm() {
  const [emoji, setEmoji] = useState("😀");
  const [name, setName] = useState("");

  return (
    <form className="space-y-4">
      <div className="space-y-2">
        <Label htmlFor="name">Project Name</Label>
        <Input
          id="name"
          value={name}
          onChange={(e) => setName(e.target.value)}
          placeholder="My awesome project"
        />
      </div>
      <div className="space-y-2">
        <Label>Project Icon</Label>
        <div className="flex gap-2">
          <div className="flex h-10 w-10 items-center justify-center rounded-md border text-2xl">
            {emoji}
          </div>
          <Popover>
            <PopoverTrigger render={<Button variant="outline">Change</Button>} />
            <PopoverContent className="w-fit p-0">
              <EmojiPicker onEmojiSelect={({ emoji }) => setEmoji(emoji)}>
                <EmojiPickerSearch />
                <EmojiPickerContent />
              </EmojiPicker>
            </PopoverContent>
          </Popover>
        </div>
      </div>
      <Button type="submit">Create Project</Button>
    </form>
  );
}

Features

Search: Filter emojis by name or keyword
Categories: Emojis organized by category (smileys, animals, food, etc.)
Skin Tones: Support for skin tone variants on applicable emojis
Keyboard Navigation: Full keyboard support for accessibility
Loading States: Built-in loading and empty states
Responsive: Adapts to different screen sizes
Customizable: Adjust columns, styling, and behavior

Accessibility

Keyboard navigation with arrow keys
Screen reader support for emoji labels
Focus management for search input
Proper ARIA attributes
High contrast support

About Frimousse

The Emoji Picker is built using Frimousse, an unstyled emoji picker library by Liveblocks. Frimousse provides:

Comprehensive emoji dataset
Virtual scrolling for performance
Skin tone management
Search functionality
Flexible component architecture

For more advanced usage and API details, see the Frimousse documentation.

Getting Started

Guides

Form Components

Layout Components

Navigation Components

Overlay Components

Display Components

Utility Components

Installation

Usage

API Reference

EmojiPicker

EmojiPickerSearch

EmojiPickerContent

EmojiPickerFooter

EmojiPickerSkinToneSelector

EmojiPickerSkinTone

Examples

Basic Emoji Picker

With Popover

With State Management

Custom Columns

With Skin Tone Footer

In a Form

Features

Accessibility

About Frimousse

Build docs developers (and LLMs) love

Getting Started

Guides

Form Components

Layout Components

Navigation Components

Overlay Components

Display Components

Utility Components

​Installation

​Usage

​API Reference

​EmojiPicker

​EmojiPickerSearch

​EmojiPickerContent

​EmojiPickerFooter

​EmojiPickerSkinToneSelector

​EmojiPickerSkinTone

​Examples

​Basic Emoji Picker

​With Popover

​With State Management

​Custom Columns

​With Skin Tone Footer

​In a Form

​Features

​Accessibility

​About Frimousse

Build docs developers (and LLMs) love

Installation

Usage

API Reference

EmojiPicker

EmojiPickerSearch

EmojiPickerContent

EmojiPickerFooter

EmojiPickerSkinToneSelector

EmojiPickerSkinTone

Examples

Basic Emoji Picker

With Popover

With State Management

Custom Columns

With Skin Tone Footer

In a Form

Features

Accessibility

About Frimousse