Emoteer

The modern emoji SDK for the web. Headless and styled React components for emoji pickers, reactions, inline autocomplete, shortcode-to-unicode inputs, and reaction intensity sliders — built on Zag.js state machines, Tailwind CSS v4, and emojibase data.

npm install @emoteer/react

/* your app's main CSS, processed by Tailwind v4 */
@import "tailwindcss";
@import "@emoteer/react/tailwind";

import { EmoteProvider, EmoteListPicker, isLocalEmote } from "@emoteer/react";

export function App() {
  return (
    <EmoteProvider locale="en">
      <EmoteListPicker
        onSelect={(e) =>
          console.log(isLocalEmote(e) ? `:${e.name}:` : e.unicode)
        }
      />
    </EmoteProvider>
  );
}

Features

• Headless primitives — every component is exposed as a compound (Root + subcomponents) so layouts, labels, and styles can be overridden without forking.
• Accessible by default — WAI-ARIA patterns for combobox, grid, tooltip, popover and slider; keyboard navigation everywhere interactive.
• SSR-safe — no DOM access during render, compatible with Next.js app/ and Remix.
• Tree-shakeable — ESM output, per-locale code splitting of emoji data so apps ship only what they use.
• 28 locales — BCP 47 tags with native-language labels and shortcodes (emojibase + CLDR providers).
• TypeScript first — strict typings, discriminated unions for emoji tiers, Locale union with IDE autocomplete.
• Zero runtime resets — the Tailwind preset only contributes utilities used by the components and the --em-* tokens, no Tailwind preflight, so it never overrides consumer base styles.

Packages

Package	Purpose	npm
@emoteer/core	Framework-agnostic loader, shortcode utilities, indexes, and types. Use directly if you're building a non-React UI.
@emoteer/theme	CSS-only design tokens and Tailwind CSS v4 preset. Consumed transitively by @emoteer/react.
@emoteer/react	Ready-to-use React 19 components (picker, autocomplete, reactions, slider, tooltip, inputs).

Support for Svelte and Vue is planned — Zag's state machines already run framework-agnostic, so porting the UI layer is the main work.

Requirements

• Node ≥ 20 (development).
• React ^19 (peer dependency of @emoteer/react).
• Modern evergreen browsers — Chromium, Firefox, Safari. No IE11.
• Tailwind CSS v4 — required, since @emoteer/react/tailwind is a preset processed by your app's Tailwind pipeline.

Monorepo

The repository is a Turborepo with pnpm workspaces. To work on a single package:

pnpm install
pnpm --filter @emoteer/react build
pnpm --filter @emoteer/react check-types

Or across the whole workspace:

pnpm build
pnpm check-types
pnpm lint

Roadmap

In progress:

• @emoteer/svelte — first non-React binding, built on Svelte 5 runes
• Skin-tone selector (long-press), state stored per-provider
• Recently used list with a pluggable storage adapter
• Expanded recipes (chat composer, feedback widget, live-chat)

Next:

• @emoteer/vue — Vue 3 binding with the same primitive surface
• Cloud sync for tenant-scoped custom emoji packs
• Animated emoji support (APNG / WebP / Lottie)
• Bundled picker themes (Slack-like, Discord-like, compact)
• Full i18n for category names and screen reader labels

See the full roadmap for shipped milestones, items under consideration, and anti-goals.

License

MIT © vyers