Basic Command Menu Block for React

So you can see it without a click. On load the menu is the Command drawn inline over a picture of the dashboard, in a plain shell that is not modal, so nothing is trapped, hidden or focused and the page around the preview keeps working. The search field opens the real command dialog, modal, with its focus trap, Escape and focus return, and the inline copy stays closed until a reload. Both show the same Palette component and share the block's state, so what you typed in the copy is in the real dialog. In your app keep the dialog and drop the copy: the "in-place" state, the scrim with its shell and the Escape and blur effects.

Yes, while the menu is open: Alt and the letter, or Option on a Mac, goes to that page and closes the menu. The block reads the physical key (event.code), so Option's special characters never matter, and it ignores the chord when Ctrl or Command is also down. The caps say Alt or Option to match the system, swapped in after the page loads. The keys are not global: they work only while the menu is open, because the app around it isn't part of this block. In your app bind them wherever the page should listen.

matchesOf keeps the pages whose name or hidden keywords hold what you typed, ignoring case and accents, in their listed order, so "slack" finds Integrations through its keywords. The letters that match in the name are marked. A group with no match disappears, and with nothing left an empty state names what you typed and suggests a page or a setting.

Here it changes the title in the drawn page's bar and the status line says "Went to Projects. In this demo only." Nothing loads. In your app call your router in pick, for example router.push(page.href), and give each page an href in PAGES.

Yes. Type to search, the arrow keys move through the rows, Enter goes to the highlighted page and Escape closes the menu and puts focus on the search field; Ctrl or ⌘ K opens the dialog while focus is inside the block, and only then, because the site's own search owns the key everywhere else. The rows are options of a cmdk listbox; the block turns off its own fuzzy filter and lists the rows itself. The real dialog is named by its title and described by its sentence, and the count is spoken from inside it.

The copy shown on load docks to the top of the page, so the keyboard does not cover the foot; the key hints go and the count stays, and the shortcut caps stay on the rows. The real dialog keeps the Command dialog's own phone layout.