Emoji Picker

Composable Frimousse emoji picker primitives and a dropdown selection control.

Installation

bash

pnpm dlx shadcn@latest add @cs/emoji-picker

Usage

tsx

import { EmojiSelect } from "@/components/cs/emoji-picker"

tsx

<EmojiSelect value={emoji} onValueChange={setEmoji} />

Emoji picker dropdown

Select an emoji from a searchable dropdown.

tsx

"use client"

import { useState } from "react"

import { EmojiSelect } from "@/registry/cs/ui/emoji-picker"
import { PreviewPanel } from "./preview-utils"

export default function EmojiPickerDropdownPreview() {
	const [emoji, setEmoji] = useState("🎉")

	return (
		<PreviewPanel>
			<EmojiSelect value={emoji} onValueChange={setEmoji} />
		</PreviewPanel>
	)
}

API Reference

EmojiSelect

Renders an emoji picker inside a controlled dropdown menu.

Props

Name	Type	Default	Description
className	string	-	-
disabled	boolean	-	-
error	string \| null	-	Validation error message for the field.
id	string	-	-
label	string	-	Visible field label.
name	string	-	-
onValueChange *	(emoji: string) => void	-	Called after the user selects an emoji.
orientation	"vertical" \| "horizontal" \| "responsive" \| null \| undefined	-	-
required	boolean	-	Requires a selected value before the form can submit.
selectClassName	string	-	Additional classes applied to the select trigger.
trigger	React.ReactElement	-	Optional replacement for the default icon trigger.
value *	string \| undefined \| null	-	Currently selected emoji shown in the default trigger.

Emoji Picker

Installation

Usage

Emoji picker dropdown

API Reference

EmojiSelect

Props

EmojiPicker

EmojiPickerSearch

EmojiPickerRow

EmojiPickerEmoji

EmojiPickerCategoryHeader

EmojiPickerContent

EmojiPickerFooter

Dependencies