A emoji picker is a component that allows users to select an emoji from a list of emojis.
"use client";
import { SmilePlusIcon } from "lucide-react";About#
The <EmojiPicker /> component is built on top of frimousse.
Installation#
pnpm dlx shadcn@latest add junwen-k/ui-x/emoji-picker
Usage#
import {
EmojiPicker,
EmojiPickerSearch,
EmojiPickerContent,
EmojiPickerFooter,
} from "@/components/ui/emoji-picker";<EmojiPicker>
<EmojiPickerSearch />
<EmojiPickerContent />
<EmojiPickerFooter />
</EmojiPicker>Examples#
Default#
"use client";
import { SmilePlusIcon } from "lucide-react";Form#
Use the emoji picker to add some personality.
"use client";
import { SmilePlusIcon } from "lucide-react";Tip: If you're looking to build a robust input field that supports emoji insertion, you're likely looking for a rich text editor. Some interesting solutions worth exploring include Novel (powered by Tiptap), Plate (powered by Slate), or shadcn-editor (powered by Lexical). For lower-level control, you can also look into their underlying frameworks.
API Reference#
Styled wrappers around frimousse — see the frimousse API reference for the underlying props.
EmojiPicker#
Wraps EmojiPicker.Root and accepts all of its props (onEmojiSelect, locale, skinTone, columns, …).
EmojiPickerSearch#
Wraps EmojiPicker.Search with a search icon, accepting standard <input> props such as placeholder.
EmojiPickerContent#
Wraps EmojiPicker.Viewport with the loading, empty and list states already composed and styled.
EmojiPickerFooter#
A footer showing a preview of the active emoji and a skin tone selector. Renders a <div> and accepts its props.