Command Popover with Badges for React

The Browse Components 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".

The name's span has flex-1, so it fills the row and pushes the Badge to the end. Button and Input read Stable with variant="secondary", and Table and DataGrid read Beta with variant="outline". The status and the variant sit in the data beside each name.

FileText is Button, Code is Input, Database is Table, and Package is DataGrid. The icon is the first child of CommandItem and is hidden from screen readers, since the name says the same thing.

CommandEmpty in the list says "No components 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 "Search components..." until someone types. Command filters and ranks the items by their text on its own.