Emoji Picker

A composable React emoji picker component with Tailwind styling

Live Demo

Installation

To use this component your project must be using React and Tailwind.

To install the component:

bun add @ferrucc-io/emoji-picker
# or
yarn add @ferrucc-io/emoji-picker
# or
npm i @ferrucc-io/emoji-picker
# or
pnpm add @ferrucc-io/emoji-picker

Then in your project you can use the component like this:

<EmojiPicker onEmojiSelect={handleEmojiSelect}>
  <EmojiPicker.Header>
    <EmojiPicker.Input placeholder="Search emoji" />
  </EmojiPicker.Header>
  <EmojiPicker.Group>
    <EmojiPicker.List />
  </EmojiPicker.Group>
</EmojiPicker>

Finally, import the component styles in your Tailwind configuration:

// If you're using Tailwind v4.x
// In your CSS file containing your tailwind configuration
// Add this line:
@source "../node_modules/@ferrucc-io/emoji-picker";

// If you're using Tailwind v3.x
// In your tailwind.config.ts
"content": [
  // Keep the existing content array
  // Add this line:
  "./node_modules/@ferrucc-io/emoji-picker/dist/**/*.{js,jsx,ts,tsx}",
],

Features

• 🎨 Unstyled & Composable: Built with Tailwind CSS. Every component is minimally styled by default and fully customizable.
• ⚡️ Fast & Lightweight: Virtualized list for smooth scrolling. Only renders emojis in view.
• 🎯 Accessible: Full keyboard navigation support. ARIA labels and proper semantic markup.
• 🌈 Dominant Color Hover: Built-in dominant color hover for supported emojis.

Props & Customization

The component accepts several props for customization:

interface EmojiPickerProps {
  emojisPerRow?: number;      // Number of emojis per row
  emojiSize?: number;         // Size of each emoji in pixels
  containerHeight?: number;    // Height of the emoji container
  hideIcon?: boolean;         // Hide the search icon
  onEmojiSelect?: (emoji: string) => void; // Callback when emoji is selected
}

Examples

Default Style

<EmojiPicker onEmojiSelect={handleEmojiSelect}>
  <EmojiPicker.Header>
    <EmojiPicker.Input placeholder="Search emoji" />
  </EmojiPicker.Header>
  <EmojiPicker.Group>
    <EmojiPicker.List />
  </EmojiPicker.Group>
</EmojiPicker>

Linear Style

<EmojiPicker>
  <EmojiPicker.Header className="pb-0">
    <EmojiPicker.Input placeholder="Search emoji" />
  </EmojiPicker.Header>
  <EmojiPicker.Group>
    <EmojiPicker.List hideStickyHeader />
  </EmojiPicker.Group>
</EmojiPicker>

Slack Style

<EmojiPicker 
  className="font-['Lato'] w-[300px] border-none"
  emojisPerRow={9}
  emojiSize={36}
>
  <EmojiPicker.Header>
    <EmojiPicker.Input 
      placeholder="Search all emoji" 
      hideIcon
    />
  </EmojiPicker.Header>
  <EmojiPicker.Group>
    <EmojiPicker.List containerHeight={320} />          
  </EmojiPicker.Group>
  <EmojiPicker.Preview>
    {({ previewedEmoji }) => (
      <>
        {previewedEmoji ? 
          <EmojiPicker.Content />
          :
          <button>Add Emoji</button>
        }
        <EmojiPicker.SkinTone />
      </>
    )}
  </EmojiPicker.Preview>
</EmojiPicker>

Credits

This project was created using bun init in bun v1.2.0. Bun is a fast all-in-one JavaScript runtime.

Contributing

This project is structured as a monorepo with two main parts:

• packages/emoji-picker: The main package containing the emoji picker component
• demo: A demo application showcasing different uses of the component

Development Setup

To get started with development:

# Install dependencies for all packages
bun install

# Build the emoji picker package
cd packages/emoji-picker
bun run build

# Run the demo app
cd ../demo
bun run dev

Updating Emoji Colors

To update the emoji hover colors:

cd packages/emoji-picker
bun run build:emoji-colors

This will generate a new emojiColors.ts file in the package's src/utils directory.

Testing

# Run tests for the emoji picker package
cd packages/emoji-picker
bun test

Contributions are welcome! Please feel free to submit a PR.