Introducing Emoteer

The emoji toolkit for the modern web.

Pickers, reactions, autocomplete and inputs. Headless primitives and styled components. Framework-agnostic core, one source of truth for emojis across your stack.

Read the docsView on GitHub
pnpm add @emoteer/react
Built for every framework
Reactready
Svelteready
Vuesoon
1,933
Emojis
emojibase dataset, per locale
28
Locales
Bundled shortcode dictionaries
~11 kb
Gzipped
Core + React bindings JS
MIT
License
Free and open source
Principles

Designed to grow with your stack.

01

Headless first.

Compound primitives give you full control over markup, ARIA and styling.

02

Framework agnostic.

Shared core with the same data, matching and state across every binding.

03

Themeable defaults.

Tailwind-ready styles ship with the library and can be overridden per slot.

What you get

Every emoji primitive, in one coherent toolkit.

Picker

A searchable emoji picker, ready to ship.

Virtualized grid, tabs per category, shortcode search, keyboard navigation, preview panel. Style it or keep the defaults.

smiley
SmileysPeopleAnimalsFoodTravel
😀😁😂🤣😊😇🙂🙃😉😌😍🥰😘😗😙😚😋😛😝😜🤪🤨🧐🤓😎🥸🤩🥳😏😒😞😔
Reactions

Counters and reaction bars.

Stateful reactions with active states, counts and toggles.

👍12
❤️6
🎉8
🚀3
+
Sliders

Intensity sliders.

0–100 emoji sliders for feedback and ratings.

🔥
coldintensityscorching
Autocomplete

Inline shortcode suggestions.

Type “:” in any input to trigger suggestions. Choose from keyboard, click or Tab.

Hey team, let's celebrate :grin
😀😃😄😁😆😅
Inputs

Auto-convert shortcodes to unicode.

Typing :star: becomes ⭐ the moment you close the shortcode. Works on inputs and textareas.

ship it :rocket:
ship it 🚀
Architecture

One core. Every framework.

The @emoteer/core package ships the data, search, matching and state machines. Framework bindings are a thin layer on top.

@emoteer/core

Data, search & state.

Framework-agnostic logic. Zero DOM dependencies.

@emoteer/reactReactavailable
@emoteer/svelteSvelteavailable
@emoteer/vueVuesoon
Theming

One primitive, infinite looks.

Every slot exposes its own CSS variable. Set a few, ship a completely different picker — no Tailwind required. Bindings are framework-agnostic, themes are too.

Default
.theme-default
Search
SmileysPeopleAnimalsFoodTravel
😀😁😂🤣😊😇🙂🙃😉😌😍🥰😘😗😙😚😋😛😝😜🤪🤨🧐🤓
👍12
❤️5
🎉8
Custom
.theme-custom
Search
SmileysPeopleAnimalsFoodTravel
😀😁😂🤣😊😇🙂🙃😉😌😍🥰😘😗😙😚😋😛😝😜🤪🤨🧐🤓
smiling face with heart-eyes:smiling_face_with_heart_eyes:
👍12
❤️5
🎉8
Example

Ship a full picker in ten lines.

App.tsx
import { EmoteList, EmoteProvider } from '@emoteer/react';
 
export default function App() {
  return (
    <EmoteProvider>
      <EmoteList.Root onSelect={handleSelect}>
        <EmoteList.Search />
        <EmoteList.Tabs />
        <EmoteList.Grid />
      </EmoteList.Root>
    </EmoteProvider>
  );
}

Compound API

Every slot is a separate component you can swap, remove or style.

No config required

Defaults render a complete picker. Override only what you need.

Typed end-to-end

First-class TypeScript types for every event and slot.

FAQ

Frequently asked questions.

Is it production ready?

The React package exposes a stable API. Other framework bindings share the same core and will land behind the same semver guarantees.

Do I need Tailwind?

No. Styled components ship with plain CSS classes. Tailwind is supported out of the box but not required.

What about bundle size?

Tree-shakeable imports keep the picker around 12kb gzipped including the virtualized grid and shortcode matcher.

Can I add custom emojis?

Yes. Pass a locale or a custom emoji list through EmoteProvider. Shortcodes and search integrate automatically.

Which frameworks are supported?

React and Svelte 5 are stable today (@emoteer/react and @emoteer/svelte) with an identical component surface. Vue is on the roadmap — the framework-agnostic core already ships most of the logic, so the binding stays thin.

Start shipping emojis in minutes.

Open source, MIT licensed, and designed to grow with your stack.

Get startedStar on GitHub