Command with Icons and Shortcuts for React

Command has h-auto w-full max-w-lg rounded-lg border shadow-md: it sits in the page flow, up to a max width, with a border and a shadow. The list is always open and there is no trigger.

Every item has an icon. The Suggestions group holds Calendar, Search Emoji and Calculator. The Settings group holds Profile, Billing and Settings, each with a shortcut label: ⌘P, ⌘B and ⌘S.

No. CommandShortcut is a label at the end of the row, and the item's check mark stays hidden while it's there. Listen for those keys yourself if Profile, Billing or Settings should run from the keyboard.

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. CommandInput shows "Type a command or search..." until someone types. Command filters and ranks the items by their text on its own.