We’ve just released [Frimousse](https://frimousse.liveblocks.io/), 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](https://liveblocks.io/comments), which is where we built
our first version.

<Figure>
  <figcaption className="sr-only">
    The Liveblocks Comments emoji picker.
  </figcaption>
  <video autoPlay loop muted playsInline>
    <source src="/images/blog/frimousse/comments.mp4" type="video/mp4" />
  </video>
</Figure>

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.

<Figure>
  <figcaption className="sr-only">
    A live example of the emoji picker.
  </figcaption>
  <Frimousse />
</Figure>

### Primitives

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

```tsx
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.

<Banner
  title="Comments primitives"
  description={
    <>
      If you’re using our Comments primitives, it’s now easy to add your own
      emoji picker. Check out our{" "}
      <Link href="/examples/comments-primitives">
        Tailwind CSS primitives example
      </Link>{" "}
      to learn how to set it up.
    </>
  }
/>

## Get started

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

<ButtonLink
  href="https://frimousse.liveblocks.io"
  size="lg"
  openInNewWindow={true}
>
  Get Frimousse
</ButtonLink>

### Comments primitives

If you’re already using our
[Comments primitives](/docs/ready-made-features/comments/primitives), it’s now
easy to add your own emoji picker with Frimousse.

<Figure>
  <figcaption className="sr-only">Our Comments primitives example.</figcaption>
  <video autoPlay loop muted playsInline>
    <source
      src="/images/blog/frimousse/comments-primitives-example.mp4"
      type="video/mp4"
    />
  </video>
</Figure>

You can find the source code in our
[examples gallery](/examples/comments-primitives).

## Contributors

<Contributors gitHubUsernames={["marcbouchenoire"]} />