Installation

Emoteer ships as a set of packages published under the @emoteer scope. The React bindings are the main entrypoint for most projects.

Requirements

• React 19 or later (peer dependency)
• Node.js 20 or later for tooling
• A bundler that supports ES modules (Next.js, Vite, Remix, Astro…)
• Tailwind CSS v4 — optional. The components are headless and ship a prebuilt plain-CSS stylesheet; Tailwind is only needed if you opt into the token preset.

Install the package

pnpm add @emoteer/react

npm install @emoteer/react

yarn add @emoteer/react

bun add @emoteer/react

Import the default styles

Emoteer's markup is style-free; pick how you bring in the look.

Without Tailwind — import the prebuilt stylesheet once, anywhere your bundler accepts a CSS import:

import '@emoteer/react/styles.css';

Plain CSS, no build step. It only styles Emoteer's own data-part selectors, so it never conflicts with your other styles, and everything themes through the --em-* tokens.

With Tailwind v4 — import the preset from your main CSS instead. You also get bg-em-* / rounded-em-* token utilities to override with:

@import 'tailwindcss';
@import '@emoteer/react/tailwind';

Headless — import nothing and style the data-part contract yourself. See Theming → Headless mode.

Wrap your app in the provider

The EmoteProvider sets up shared state and the emoji dataset. Mount it once, near the root of the tree.

import { EmoteProvider } from '@emoteer/react';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <EmoteProvider>
      {children}
    </EmoteProvider>
  );
}

Your first picker

Once the provider is in place, any primitive can be rendered anywhere in the tree.

import { EmoteList } from '@emoteer/react';

export function Picker() {
  return (
    <EmoteList.Root onSelect={(emote) => console.log(emote.unicode)}>
      <EmoteList.Search />
      <EmoteList.Tabs />
      <EmoteList.Grid />
      <EmoteList.Preview />
    </EmoteList.Root>
  );
}

That's it — you now have a full-featured emoji picker with search, tabs, a virtualized grid and a preview panel.

Next steps