KeyboardShortcuts

Code

import { ShortcutsDialog, type ShortcutGroup } from "@fadymondy/nasaq/web";const groups: ShortcutGroup[] = [  { id: "nav", title: "Navigation", titleAr: "التنقل", items: [    { id: "palette", label: "Open the command palette", labelAr: "فتح لوحة الأوامر", keys: "Mod+K" },    { id: "inbox", label: "Go to inbox", labelAr: "الانتقال إلى الوارد", keys: "G I" },  ] },];export function Help() {  return <ShortcutsDialog groups={groups} />; // press ? anywhere}

Keyboard & Commands · stable

Live examples and controls: KeyboardShortcuts in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/keyboard-shortcuts.json

The help sheet people open to learn the keys. Shortcuts are written once as strings ("Mod+K", "G I") and drawn per platform: Mod becomes Command on a Mac and Ctrl elsewhere. A switch lets someone on Windows read the Mac keys for a teammate, and back. Search folds Arabic letter variants, so searching for an unhamzed word finds it.

When to useCopy Anchor Link

• A help dialog or a "Keyboard shortcuts" page in account settings.
• Anywhere one shortcut should be drawn as key caps: ShortcutKeys.

When not to useCopy Anchor Link

• Letting people change a shortcut: use HotkeyRecorder.
• Running commands from a palette: Commands.

ImportCopy Anchor Link

import { ShortcutsDialog, ShortcutsReference, ShortcutKeys } from "@fadymondy/nasaq/web";

Quick startCopy Anchor Link

import { ShortcutsDialog, type ShortcutGroup } from "@fadymondy/nasaq/web";

const groups: ShortcutGroup[] = [
  { id: "nav", title: "Navigation", titleAr: "التنقل", items: [
    { id: "palette", label: "Open the command palette", labelAr: "فتح لوحة الأوامر", keys: "Mod+K" },
    { id: "inbox", label: "Go to inbox", labelAr: "الانتقال إلى الوارد", keys: "G I" },
  ] },
];

export function Help() {
  return <ShortcutsDialog groups={groups} />; // press ? anywhere
}

AnatomyCopy Anchor Link

ShortcutsReference        data-slot="shortcuts-reference"
├─ header: title, description, platform switch, search
└─ section per group      <h3> + <ul>
   └─ li                  label, description, ShortcutKeys per alternative
ShortcutsDialog           a Dialog around ShortcutsReference
ShortcutKeys              data-slot="shortcut-keys"  role="img" with a spoken name

APICopy Anchor Link

ShortcutsReferenceCopy Anchor Link

ShortcutsDialogCopy Anchor Link

Everything above plus open, defaultOpen, onOpenChange, and hotkey (default "?", null turns it off). The hotkey is ignored while a text field, select or editable region has focus.

ShortcutKeysCopy Anchor Link

shortcut (string), platform, thenLabel, className. useShortcutApple(platform) tells you if keys are drawn for a Mac.

AccessibilityCopy Anchor Link

• Each shortcut is one role="img" with a spoken label ("Command Shift K"), not a run of separate caps.
• The dialog traps focus and closes with Escape. The switch is a toggle group with a visible label.

RTL & i18nCopy Anchor Link

• Key caps are always left to right, also in Arabic. Text around them follows the page direction.
• Strings: en and ar through the Nasaq locale, overridable with labels. Items carry their own labelAr.

Styling & tokensCopy Anchor Link

Uses Kbd, Dialog and muted text tokens. Extend with className.

Do / Don'tCopy Anchor Link

• Do write Mod+K, not "Ctrl+K", so the Mac sees Command.
• Do give apple keys only when they differ by more than Cmd for Ctrl.
• Do not list shortcuts the app does not really bind.

RelatedCopy Anchor Link

• HotkeyRecorder
• Commands

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-keyboard-commands-keyboard-shortcuts--docs