Command Palette Shortcut Kbd for React

Apps like Slack, Linear and GitHub made it popular, and others followed so people could use the same key everywhere. K is easy to reach and wasn't taken by a common editing command in most web apps.

Show the one for the user's platform: ⌘K on macOS, Ctrl K elsewhere, and listen for both. The Platform-Aware Shortcut example switches the label.

Add a keydown listener to the document, check event.key for k together with event.metaKey or event.ctrlKey, call preventDefault and open the palette. Remove the listener when the component is removed.

Usually yes: it's a modifier shortcut, so it doesn't type anything, and people expect to reach the palette from anywhere. The exception is a rich text editor that uses ⌘K to insert a link; there, let the editor have it.

Some browsers use Ctrl K on Windows and Linux to search from the address bar. Calling preventDefault in your handler keeps it in the page. Shortcuts the operating system reserves can't be overridden, so avoid those.

They must be able to: give the palette a visible trigger, such as a search button that shows the ⌘K caps. The shortcut is a faster way in, not the only one.