Emoji Picker React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Emoji Picker is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import EmojiPicker from @/components/ui/emoji-picker.

import { useState } from "react"
import { EmojiPicker, EmojiPickerPopover } from "@/components/ui/emoji-picker"

export function CommentBox() {
  const [text, setText] = useState("Congrats on the launch, Emma ")
  return (
    <div className="flex flex-col gap-3">
      <div className="flex items-center gap-2">
        <input value={text} onChange={(event) => setText(event.target.value)} className="flex-1" />
        <EmojiPickerPopover onSelect={({ emoji }) => setText((current) => current + emoji)} />
      </div>
      <EmojiPicker columns={9} onSelect={({ emoji, name }) => console.log(emoji, name)} />
    </div>
  )
}

Props

• columnsdefault 8
  number

  Cells per row. The picker is as wide as this many cells, and drops columns when its container is narrower.

• sizedefault "md"
  "sm" | "md" | "lg"

  Cells of 32 / 36 / 44px with 20 / 24 / 28px emoji, and the search field (32 / 40 / 48px), tabs and footer to match. On touch screens every cell is at least 44px.

• radiusdefault "md"
  "none" | "sm" | "md" | "lg" | "full"

  Corner shape of the cells, tabs, search field and skin tone button; scales with the size like the button's.

• variantdefault "surface"
  "surface" | "plain"

  surface is a raised panel of its own; plain has no fill, for a popover, a sheet or a card that already has one.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  Color of the selected emoji's tint and ring and of the active category tab.

• colordefault ""
  string

  Any CSS color in place of the tone. Leave empty to use the tone.

• heightdefault 296
  number

  Height of the scrolling grid in px. Ignored with fullHeight.

• fullWidthdefault false
  boolean

  Stretches to the container and fits as many columns as there is room for.

• fullHeightdefault false
  boolean

  The grid takes the height left in the container instead of height. Give the picker or its parent a height.

• value
  string

  The picked emoji, shown with a tint and ring in the grid. Pair it with onValueChange; leave it out to let the picker keep its own.

• defaultValuedefault ""
  string

  The emoji shown as picked at first while uncontrolled.

• onValueChange
  (emoji: string) => void

  Called with the emoji (skin tone applied) on every pick.

• onSelect
  (emoji: EmojiPickerEmoji) => void

  Called on every pick with { emoji, base, name, keywords, category, skinTones }: the emoji with the skin tone, the one without, and its data.

• skinTone
  "default" | "light" | "medium-light" | "medium" | "medium-dark" | "dark"

  Controlled skin tone; pair it with onSkinToneChange.

• defaultSkinTonedefault "default"
  "default" | "light" | "medium-light" | "medium" | "medium-dark" | "dark"

  The skin tone until the person picks one. A saved choice (see storageKey) wins after the first render.

• onSkinToneChange
  (tone: EmojiSkinTone) => void

  Called when a skin tone is picked from the header row.

• categoriesdefault "["smileys", "people", "nature", "food", "activities", "travel", "objects", "symbols", "flags"]"
  EmojiCategoryId[]

  Which categories show, in this order: "smileys", "people", "nature", "food", "activities", "travel", "objects", "symbols", "flags". Search only looks in these.

• showRecentdefault true
  boolean

  A recently used section (and tab) at the top, once something has been picked.

• maxRecentdefault 24
  number

  How many recent emoji are kept, newest first.

• recent
  string[]

  Controlled recent emoji (plain, without skin tone). Uncontrolled they are saved in localStorage under storageKey.

• defaultRecent
  string[]

  The recent row before anything is picked or saved, like your app's favorites. The demo seeds 30 so maxRecent shows.

• onRecentChange
  (recent: string[]) => void

  Called with the new recent list after a pick.

• showSearchdefault true
  boolean

  The search field in the header.

• showTabsdefault true
  boolean

  The row of category tabs. Each shows its name in a tooltip.

• showSkinTonesdefault true
  boolean

  The hand button at the end of the header that opens the six skin tones.

• showPreviewdefault true
  boolean

  The footer with the hovered or highlighted emoji, its name and its shortcode.

• showSectionLabelsdefault true
  boolean

  A heading above each section in the grid.

• searchPlaceholderdefault "Search emoji"
  string

  Placeholder of the search field.

• autoFocusdefault false
  boolean

  Focuses the search field on mount. EmojiPickerPopover focuses it on open by itself (not on touch screens).

• storageKeydefault "emoji-picker"
  string

  localStorage prefix for the recent emoji and the skin tone ("<key>:recent", "<key>:skin-tone"). An empty string keeps them in memory only.

• emojiFontdefault ""Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif"
  string

  The font stack the emoji are drawn with. The emoji are text, so no images load.

• icons
  Partial<Record<"recent" | EmojiCategoryId, ReactNode>>

  Replaces the icons of the category tabs.

• labels
  Partial<EmojiPickerLabels>

  Every string: search, clear, grid, categories, recent, results, resultCount ({count} results), noResults, noResultsHint, previewEmpty (Pick one of {count} emoji), skinTone, the nine category names and the six tone names. Defaults in EMOJI_PICKER_LABELS.

• localedefault ""
  string

  Locale for lowercasing the query and formatting numbers: the emoji count in the empty preview (1,870 or 1.870) and the announced result count. Empty uses the UIProvider locale, then the browser's. The demo defaults to en-US.

• classNames
  Partial<Record<"header" | "search" | "input" | "clear" | "skinTone" | "skinToneOption" | "tabs" | "tab" | "indicator" | "viewport" | "sectionLabel" | "row" | "cell" | "empty" | "footer" | "preview", string>>

  Extra classes for the inner parts.

• className
  string

  Extra classes for the root, merged last. The root takes div props.

Parts

FAQ

More React input components