https://github.com/liveblocks/frimousse
A lightweight, unstyled, and composable emoji picker for React.
https://github.com/liveblocks/frimousse
component emoji emoji-picker emojibase liveblocks react unstyled
Last synced: 6 months ago
JSON representation
A lightweight, unstyled, and composable emoji picker for React.
- Host: GitHub
- URL: https://github.com/liveblocks/frimousse
- Owner: liveblocks
- License: mit
- Created: 2025-02-03T15:21:06.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-03-28T08:49:55.000Z (7 months ago)
- Last Synced: 2025-03-28T09:37:11.480Z (7 months ago)
- Topics: component, emoji, emoji-picker, emojibase, liveblocks, react, unstyled
- Language: TypeScript
- Homepage: https://frimousse.liveblocks.io
- Size: 3.75 MB
- Stars: 787
- Watchers: 3
- Forks: 11
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- my-awesome-list - frimousse
README
[](https://www.npmjs.com/package/frimousse)
[](https://www.npmjs.com/package/frimousse)
[](https://bundlephobia.com/package/frimousse)
[](https://github.com/liveblocks/frimousse/actions/workflows/tests.yml)
[](https://github.com/liveblocks/frimousse/blob/main/LICENSE)
A lightweight, unstyled, and composable emoji picker for React.
- ⚡️ **Lightweight and fast**: Dependency-free, tree-shakable, and virtualized with minimal re-renders
- 🎨 **Unstyled and composable**: Bring your own styles and compose parts as you want
- 🔄 **Always up-to-date**: Latest emoji data is fetched when needed and cached locally
- 🔣 **No � symbols**: Unsupported emojis are automatically hidden
- ♿️ **Accessible**: Keyboard navigable and screen reader-friendly
## Installation
```bash
npm i frimousse
```
If you are using [shadcn/ui](https://ui.shadcn.com/), you can also install it as a pre-built component via the [shadcn CLI](https://ui.shadcn.com/docs/cli).
```bash
npx shadcn@latest add https://frimousse.liveblocks.io/r/emoji-picker
```
Learn more in the [shadcn/ui](#shadcnui) section.
## Usage
Import the `EmojiPicker` parts and create your own component by composing them.
```tsx
import { EmojiPicker } from "frimousse";
export function MyEmojiPicker() {
return (
Loading…
No emoji found.
);
}
```
Apart from a few sizing and overflow defaults, the parts don’t have any styles out-of-the-box. Being composable, you can bring your own styles and apply them however you want: [Tailwind CSS](https://tailwindcss.com/), CSS-in-JS, vanilla CSS via inline styles, classes, or by targeting the `[frimousse-*]` attributes present on each part.
You might want to use it in a popover rather than on its own. Frimousse only provides the emoji picker itself so if you don’t have a popover component in your app yet, there are several libraries available: [Radix UI](https://www.radix-ui.com/primitives/docs/components/popover), [Base UI](https://base-ui.com/react/components/popover), [Headless UI](https://headlessui.com/react/popover), and [React Aria](https://react-spectrum.adobe.com/react-aria/Popover.html), to name a few.
### shadcn/ui
If you are using [shadcn/ui](https://ui.shadcn.com/), you can install a pre-built version which integrates with the existing shadcn/ui variables via the [shadcn CLI](https://ui.shadcn.com/docs/cli).
```bash
npx shadcn@latest add https://frimousse.liveblocks.io/r/emoji-picker
```
It can be composed and combined with other shadcn/ui components like [Popover](https://ui.shadcn.com/docs/components/popover).
## Documentation
Find the full documentation and examples on [frimousse.liveblocks.io](https://frimousse.liveblocks.io).
## Miscellaneous
The name [“frimousse”](https://en.wiktionary.org/wiki/frimousse) means “little face” in French, and it can also refer to smileys and emoticons.
The emoji picker component was originally created for the [Liveblocks Comments](https://liveblocks.io/comments) default components, within [`@liveblocks/react-ui`](https://github.com/liveblocks/liveblocks/tree/main/packages/liveblocks-react-ui).
## Credits
The emoji data is based on [Emojibase](https://emojibase.dev/).
## Contributing
All contributions are welcome! If you find a bug or have a feature request, feel free to create an [issue](https://github.com/liveblocks/frimousse/issues) or a [PR](https://github.com/liveblocks/frimousse/pulls).
The project is setup as a monorepo with the `frimousse` package at the root and [frimousse.liveblocks.io](https://frimousse.liveblocks.io) in the `site` directory.
### Development
Install dependencies and start development builds from the root.
```bash
npm i
npm run dev
```
The site can be used as a development playground since it’s built with the root package via [Turborepo](https://turbo.build/repo).
```bash
npm run dev:site
```
### Tests
The package has 95%+ test coverage with [Vitest](https://vitest.dev/). Some tests use Vitest’s [browser mode](https://vitest.dev/guide/browser-testing) with [Playwright](https://playwright.dev/), make sure to install the required browser first.
```bash
npx playwright install chromium
```
Run the tests.
```bash
npm run test:coverage
```
### Releases
Releases are triggered from [a GitHub action](.github/workflows/release.yml) via [release-it](https://github.com/release-it/release-it), and continuous releases are automatically triggered for every commit in PRs via [pkg.pr.new](https://github.com/stackblitz-labs/pkg.pr.new).