Emoji Picker

Installation

npx shadcn@latest add @chewypixel/emoji-picker

Usage

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

export function Reactions({ onPick }: { onPick: (emoji: string) => void }) {
  return (
    <EmojiPicker columns={8} onEmojiSelect={({ emoji }) => onPick(emoji)}>
      <EmojiPickerSearch />
      <EmojiPickerContent />
      <EmojiPickerFooter />
    </EmojiPicker>
  );
}

Props

onEmojiSelect

Called with the emoji someone picks.

({ emoji, label }) => void

columns

How many emoji fit in a row. Use 8 at the default width, or widen the picker for more.

number = 10

emojibaseUrl

Where emoji data loads from. It comes from a CDN by default; point it at your own copy to self-host.

string

placeholder

On EmojiPickerSearch, the search box placeholder.

string = "Search emoji…"

Released under the MIT License.

More components

• Segmented ControlMutually exclusive options with a highlight that slides to the selected one.
• TabsUnderline tabs. The underline slides to the active tab and resizes to fit its label.
• SwitchA switch whose thumb springs across when toggled and stretches while pressed.
• CheckboxA checkbox that draws its check mark and squishes when pressed.