Components
Loading preview...
A lightweight, unstyled, and composable emoji picker for React.
@liveblocks
npx shadcn@latest add https://21st.dev/r/liveblocks/emoji-picker"use client";
import * as React from "react";
import { Button } from "@/components/ui/button";
import {
EmojiPicker,
EmojiPickerSearch,
EmojiPickerContent,
EmojiPickerFooter,
} from "@/components/ui/emoji-picker";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
export function Page() {
const [isOpen, setIsOpen] = React.useState(false);
return (
<main className="flex h-full min-h-screen w-full items-center justify-center p-4">
<Popover onOpenChange={setIsOpen} open={isOpen}>
<PopoverTrigger asChild>
<Button>Open emoji picker</Button>
</PopoverTrigger>
<PopoverContent className="w-fit p-0">
<EmojiPicker
className="h-[342px]"
onEmojiSelect={({ emoji }) => {
setIsOpen(false);
console.log(emoji);
}}
>
<EmojiPickerSearch />
<EmojiPickerContent />
<EmojiPickerFooter />
</EmojiPicker>
</PopoverContent>
</Popover>
</main>
);
}