build69
Sign inGet API key
build69  /  Components  /  Overlays  /  ShortcutHelp

ShortcutHelp

v1.0.8Updated 27 Aug 2026

Keyboard-shortcuts help dialog built on Radix Dialog. Documents app shortcuts as a grouped two-column list of Kbd keycaps ("mod" renders ⌘ on macOS, Ctrl elsewhere), with a filter-as-you-type search field and a global ho

View source← Back to catalog

Preview

Live · 10 stories
DefaultOpen ↗
▸Why this is recommendedkeyboardshortcutshotkeyhelp+6

The default, out-of-the-box ShortcutHelp.

Recommended for+14
  • ✓Power-user shortcut cheatsheets
  • ✓Back-office apps with keyboard workflows
  • ✓Onboarding users to command-menu shortcuts
  • ✓Any app that binds global hotkeys
Tags+6
keyboardshortcutshotkeyhelpkbddialogoverlaycheatsheetradixdefault
Features+4
  • Grouped two-column shortcut list using the Kbd primitive
  • Platform-aware keys (mod → ⌘ on macOS, Ctrl elsewhere)
  • Search field filters by description, group, or key label (both platform spellings)
  • Global hotkey opens the dialog (default "shift+?", customisable or null to disable)
  • Typing guard: hotkey ignored inside inputs / textareas / contenteditable
  • Controlled and uncontrolled open state
  • Optional trigger element (Radix Trigger asChild)
  • aria-live result count + sr-only key labels for screen readers
  • Sizes md / lg / xl; footer hint showing the hotkey
  • Respects prefers-reduced-motion; SSR-safe listeners
  • i18n: labels prop overrides every built-in UI string (title/search/empty fallbacks, search aria-label, sr-only description, result-count announcement with {count} template, footer hint, close aria-label); merged over DEFAULT_SHORTCUT_HELP_LABELS
Not recommended for−2
  • ✕Executing commands (use Command palette)
  • ✕Generic modal content (use Dialog)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "ShortcutHelp" })

Usage

import { ShortcutHelp } from '@/components/overlays/shortcut-help';

<ShortcutHelp
  groups={[
    { title: 'General', shortcuts: [{ keys: ['mod', 'K'], description: 'Open command menu' }] },
  ]}
  trigger={<Button tone="neutral" emphasis="outline">Shortcuts</Button>}
/>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
groups

Grouped shortcuts: { title, shortcuts: { keys: string[], description }[] }

ShortcutHelpGroup[]yes
hotkey

Global open hotkey, e.g. "shift+?" (default) or "mod+/"; null disables

string | null—
open

Controlled open state

boolean—
defaultOpen

Uncontrolled initial open state

boolean—
onOpenChange

Open-state change callback

(open: boolean) => void—
trigger

Optional trigger element (rendered asChild)

ReactNode—
title

Dialog title (default "Keyboard shortcuts")

ReactNode—
searchable

Show the search field (default true)

boolean—
size

Dialog width (default lg)

'md' | 'lg' | 'xl'—
labels

Override any built-in UI string (i18n). Merged over DEFAULT_SHORTCUT_HELP_LABELS; title/searchPlaceholder/emptyMessage props win over their label counterparts

Partial<ShortcutHelpLabels>—

Related

Platform docsAll componentsSource files