Emoji Picker

Inline :shortcode typing with an autocomplete dropdown showing emoji previews.

:fi

:fire:
:finish_line:
:first_place:
:fish:

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use

import { Editor33 } from "@/components/beste/piece/editor33";

<Editor33
  query=":fi"
  items={[
    {
      "shortcode": ":fire:",
      "emoji": "🔥",
      "active": true
    },
    {
      "shortcode": ":finish_line:",
      "emoji": "🏁"
    },
    {
      "shortcode": ":first_place:",
      "emoji": "🥇"
    },
    {
      "shortcode": ":fish:",
      "emoji": "🐟"
    }
  ]}
/>