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.
We first felt the need for a new emoji picker when building
Liveblocks Comments, which is where we built
our first version.
The Liveblocks Comments emoji picker.
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.
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.
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.
Comments primitives
If you’re using our Comments primitives, it’s now easy to add your own emoji picker. Check out our Tailwind CSS primitives example to learn how to set it up.