Keyboard shortcuts

A dialog with every shortcut grouped by area, a filter and platform-aware keys, plus a ShortcutKeys renderer for tooltips and menus.

Markdown

On this page

Every shortcut grouped by area, with a filter and platform-aware keys.

Installation

$ pnpm dlx shadcn@latest add https://chatcn.dev/r/keyboard-shortcuts.json

Usage

tsx

import { defaultShortcuts, KeyboardShortcuts, ShortcutKeys } from "@/components/ui/chatcn/keyboard-shortcuts"

// Opens on Cmd+/ or Ctrl+/ by itself.
<KeyboardShortcuts
  shortcuts={[
    ...defaultShortcuts,
    { id: "run", label: "Run the agent", keys: "mod+enter", group: "Agent" },
  ]}
/>

// The same keys anywhere else.
<ShortcutKeys keys="mod+shift+o" />

Keys are hotkey strings from useChatcnHotkeys: mod renders as ⌘ on a Mac and Ctrl elsewhere, and an array lists alternatives with or between them. Spell the comma key comma, since a comma separates alternatives in one string.

Props

Prop	Type	Notes
`shortcuts`	`Shortcut[]`	`id`, `label`, `keys`, `group`, `when`. Default `defaultShortcuts`
`groups`	`string[]`	Group order
`open`, `defaultOpen`, `onOpenChange`		Controlled or uncontrolled
`hotkey`	`string \| null`	Default `mod+/`
`filter`	`boolean`	Show the filter field. Default true
`title`, `description`	`ReactNode`	Dialog heading
`apple`	`boolean`	Force Mac or PC key labels

Keyboard

Key	Action
`Cmd+/`, `Ctrl+/`	Open or close
Typing	Filters by label and area
`Esc`	Close and return focus

Accessibility

Each area is a labelled section with a description list: the action is the term, the keys are the definition.
The filter gets focus on open, so typing narrows the list at once.
Key symbols come from the platform, so a Windows user never reads ⌘.

Motion

Opened with the shortcut or closed with Escape, the dialog appears and leaves instantly.
Opened with a pointer, it scales from 0.96 and fades in over 220 ms, and leaves over 160 ms.