import { Button } from "@/components/ui/button"; import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from "@/components/ui/command"; import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover"; // Install MynaUI Icons from icons.mynaui.com import { Bookmark, ChevronUpDown } from "@mynaui/icons-react"; export default function Simple() { return ( <Popover> <PopoverTrigger asChild> <Button variant="outline" role="combobox" className="w-full justify-between md:w-72" > <div className="flex items-center gap-2 truncate"> <Bookmark className="size-4" stroke={2} /> Select a bookmark </div> <ChevronUpDown className="size-4 shrink-0 text-slate-400" stroke={2} /> </Button> </PopoverTrigger> <PopoverContent className="w-full p-0 md:w-72"> <Command> <CommandInput placeholder="Search bookmarks..." /> <CommandEmpty>No bookmarks found.</CommandEmpty> <CommandList> <CommandGroup className="max-h-[300px] overflow-auto"> <CommandItem> <Bookmark className="mr-2 size-4" stroke={2} /> Personal Blog </CommandItem> <CommandItem> <Bookmark className="mr-2 size-4" stroke={2} /> Work Project Dashboard </CommandItem> <CommandItem> <Bookmark className="mr-2 size-4" stroke={2} /> Favorite Recipes </CommandItem> <CommandItem> <Bookmark className="mr-2 size-4" stroke={2} /> Travel Inspiration </CommandItem> <CommandItem> <Bookmark className="mr-2 size-4" stroke={2} /> Coding Resources </CommandItem> <CommandItem> <Bookmark className="mr-2 size-4" stroke={2} /> Design Inspiration </CommandItem> <CommandItem> <Bookmark className="mr-2 size-4" stroke={2} /> Financial Trackers </CommandItem> <CommandItem> <Bookmark className="mr-2 size-4" stroke={2} /> Fitness Routines </CommandItem> <CommandItem> <Bookmark className="mr-2 size-4" stroke={2} /> Productivity Tools </CommandItem> <CommandItem> <Bookmark className="mr-2 size-4" stroke={2} /> Educational Resources </CommandItem> </CommandGroup> </CommandList> </Command> </PopoverContent> </Popover> ); }

Combobox

Basic

With Icons

Simple