shadcn.io is not affiliated with official shadcn/ui
Keyboard Shortcuts Command Menu Block for Svelte
A task app's shortcut sheet as a command menu shown open as a help popover at the corner: a Mac or Windows switch re-labels every key cap, groups fold from their heads, search filters by action name, and a button really copies the list as a Markdown table.
Installation
Overview
Show every shortcut for the keyboard the person has with this shortcut sheet command menu for Svelte with Ark UI. It opens from the Tasks page of Hotkey Harbour, a keyboard-first task app, whose header holds an outline field with its ⌘ K cap, and the task list is drawn under a soft scrim inside a hairline frame with a plus mark on each corner, a round help button at its bottom end and the menu docked above it like a popover. The menu is the catalog Command. A Toggle Group, Mac or Windows, is set from the browser when the page loads and re-labels every key cap: ⌘ becomes Ctrl, ⌥ becomes Alt and ⇧ becomes Shift. Twelve shortcuts sit in three groups, Navigation, Editing and View, and each group folds from the row at its head; typing filters by what an action is called and looks inside folded groups too. Copy as Markdown table, a Copy Button, really copies the whole list for the platform that is chosen. Choosing a shortcut names it, with its keys, on the drawn task list; nothing runs. For preview the menu is drawn open in place when the page loads; the field, or Ctrl or ⌘ K while focus is in the block, opens the real command dialog with the same platform, folds and query. For apps with keyboard shortcuts, editors and tools that people live in all day.
FAQ
Why is the menu already open, and what do I keep?
So you can see it without a click. On load the menu is the Command drawn inline over a picture of the task list, in a plain shell that is not modal, so nothing is trapped, hidden or focused and the page around the preview keeps working. The header's 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 and share the block's state, so the platform, the folds and the text you typed in the copy are 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.
How do the caps change with the platform?
Each shortcut stores its keys as platform-free tokens ("mod", "shift", "alt", "N") and capsOf turns them into the caps of the chosen platform, so no shortcut is written twice. The switch starts on the platform the browser reports once the page has loaded (the server renders the Mac caps), and you can flip it to see the other. The list, the Markdown table and the sentence the status line says all read the same choice.
What does Copy as Markdown table copy, and what if the browser refuses?
A table of every shortcut, one row each with its group, its action and its caps for the platform that is chosen, written to the clipboard through the browser's own clipboard API; it is not a pretend copy. The status line says "Copied the Mac shortcuts as a Markdown table." (spoken inside the menu, since a modal dialog hides what is around it), and if the browser refuses, which it does on a page not served over HTTPS, it says so.
How do groups fold, and what does searching do to them?
The head of a group is its first row, with its count and a chevron, so a screen reader meets it as a row you can press: Enter, a click or Space (on the highlighted row) folds or shows the group, and the row says which in words. Searching ignores the folds, because a match is a match: it lists the shortcuts whose name or hidden keywords hold what you typed, under the name of their group.
Is it accessible from the keyboard?
Yes. Type to search, the arrow keys move through the rows, Enter folds a group or chooses a shortcut and Escape closes the menu and puts focus on the field; Ctrl or ⌘ K opens the dialog while focus is inside the block, and only then. The platform switch and the copy button are above the input, in the tab order. The rows are options of a combobox and the first is highlighted when it opens.