We’ve open-sourced our customizable React emoji picker

We’ve just released Frimousse, a new open-source emoji picker for React. Unstyled, designed to be lightweight and highly composable, the new component can seamlessly fit into any application.

Origin

We first felt the need for a new emoji picker when building Liveblocks Comments, which is where we built our first version.

We built this because we discovered that there were no existing components that fit our specific needs:

• It needed to be fully unstyled, so we could apply our styling from our existing components. For example, we use a number of complex CSS variables for sizing, colours, and more, and we needed the emoji picker to inherit these.
• We wanted a small bundle, only requiring users to download emoji lists when the picker is used, caching data so re-downloads aren’t required.
• We wanted it to always have the latest emojis, as other libraries often require you to install new versions to get updates.

Frimousse

We’d always loved the thought of open-sourcing our Comments emoji picker, and after two years of production use, we decided it was time to give back to the web community—try a demo below.

Primitives

Frimousse uses primitive components, similar to Radix UI, that essentially allow you to create an emoji picker out of building blocks.

import { EmojiPicker } from "frimousse";
export function MyEmojiPicker() {  return (    <EmojiPicker.Root>      <EmojiPicker.Search />      <EmojiPicker.Viewport>        <EmojiPicker.Loading>Loading…</EmojiPicker.Loading>        <EmojiPicker.Empty>No emoji found.</EmojiPicker.Empty>        <EmojiPicker.List />      </EmojiPicker.Viewport>    </EmojiPicker.Root>  );}

Because each component is headless, you can apply your own styles, whilst Frimousse handles the functionality. For example, it’s compatible with Tailwind CSS, CSS-in-JS, and vanilla CSS. We also have a pre-built shadcn/ui component, with ready-made styles.

Get started

To build your custom emoji picker, visit our new mini-site for documentation and examples.

Comments primitives

If you’re already using our Comments primitives, it’s now easy to add your own emoji picker with Frimousse.

You can find the source code in our examples gallery.

Contributors

Contributors include:

1 authors