Simple Command Popover for React

The Open Command Menu button is the trigger, and the panel opens below it, lined up with its start edge. The panel is 400px wide, never wider than the screen, and has no padding, so the Command fills it. A visually hidden PopoverTitle names it. PopoverTrigger renders the button through render, and PopoverContent sets align="start".

One CommandGroup with the heading Suggestions holds three CommandItems: Calendar, Search Emoji and Calculator. Each item's text is its only content.

Use a Command to run an action or jump somewhere. Use a Combobox when the choice is a value that stays in a form field.

CommandEmpty in the list says "No results found." It shows only when the search leaves nothing.

These items don't run anything yet. Pass onSelect to each CommandItem.

The arrow keys move through the items, Enter runs the highlighted one, and typing filters the list. Escape or a click outside closes the popover, and focus goes back to the button. CommandInput shows "Type a command or search..." until someone types. Command filters and ranks the items by their text on its own.