Pickers

Emoji Picker

Emoji and icon picker panel with search, category jumps and an upload tab. Put it in a Popover.

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Use it anywhere inside your app's <Theme> (see Installation):

/src/EmojiPickerExample.tsx
import { useState } from 'react';
import { Button, EmojiPicker, Popover } from '@krackedui/motion';

export function PageIconPicker() {
  const [icon, setIcon] = useState('💡');
  return (
    <Popover.Root>
      <Popover.Trigger asChild>
        <Button variant="secondary" aria-label={`Page icon: ${icon}`}><span className="text-[18px]">{icon}</span></Button>
      </Popover.Trigger>
      <Popover.Content radius="lg" aria-label="Choose an icon">
        <EmojiPicker onSelect={setIcon} onRemove={() => setIcon('📄')} autoFocus />
      </Popover.Content>
    </Popover.Root>
  );
}

Examples

In a popover

API Reference

EmojiPicker

PropTypeDefault
onSelect
(emoji: string) => void
onSelectIcon
(icon: IconName) => void
onRemove
() => void
onUpload
() => void
defaultTab
"emoji""icons""upload"
"emoji"
categories
EmojiCategory[]
emojiCategories
highlighted
string
autoFocus
boolean
false

Accessibility

  • Tabs (Emoji / Icons / Upload) follow the WAI-ARIA tabs pattern.
  • The search field is labelled "Search emoji"; each category is a labelled group of buttons named by the emoji (or icon name).
  • The footer is a "Emoji categories" navigation whose buttons scroll to each category.
  • Every control has a visible focus ring; Tab moves through the grid.

Usage

  • Use to pick a page, project or reaction icon.
  • Give the Popover content an aria-label ("Choose an icon").
  • Pass onRemove to offer "Remove" for an existing icon.
© 2026 Motion. Internal documentation.