Card Inset Keyboard Shortcut CTA Block for React

The caps come from KEYS at the top of the file, one cap each in the order the keys are pressed. The check that opens the palette is isShortcut, which wants Command or Control, Shift and K; change it and heldCaps together so the caps follow the keys you pick. The palette's rows are the ACTIONS list: an icon, a label and an optional shortcut hint. Four to six keep it the height of a real palette.

Only while focus is inside the section. The keys are read by an onKeyDown on the section's shell, never a listener on the window, so a marketing block doesn't take a shortcut away from the rest of your page or from the browser. Keys typed in the palette itself are ignored by that handler. If your app already has a global shortcut, bind it there and keep this block as the picture of it.

The caps are one button with a name that spells the shortcut out, "Open the command palette. Shortcut: Command or Control, Shift and K", and aria-keyshortcuts for it; the cap glyphs themselves are hidden, since a screen reader may read ⌘ as "place of interest sign". The palette is a real dialog: focus moves into its search field, the arrow keys move through the actions, Enter runs one and Escape closes it, and focus returns to whatever opened it. The action you picked is announced in a polite status line under the button.

Choosing one calls the palette's select handler, which closes the dialog and stores the label in chosen, shown under the button as "You chose Invite a teammate". Replace that with your own: route to a page, open another dialog or call a function. Nothing here talks to a server, and the status line is only there so the demo says what happened. Each CommandItem has an onSelect; handleSelect receives the item's value, its label here.

The caps show the Mac key, as most keyboard-first products do, and the line under the button says "Command on macOS, Control on Windows and Linux". The handler accepts either one (metaKey or ctrlKey). If your audience is mostly on Windows, change the first cap to Ctrl in KEYS, and the button's aria-label with it.

The card fades up once on load, the caps sink about two pixels while pressed or while their modifier key is held and the palette uses the dialog's own transition. They're all CSS, and with reduced motion on the entrance is switched off, so everything is in place from the start, and a pressed cap sinks at once instead of gliding.