Shortcut Cheatsheet

A keyboard-shortcut cheatsheet overlay summoned with ?, with grouped lists, kbd keycaps, and search filtering.

A centered cheatsheet panel you summon by pressing ?: shortcuts are arranged into groups such as Navigation / Editing / View, keycaps are rendered in a raised kbd style, hovering a row presses the whole row down slightly, and the search box at the top filters live and highlights the matched text. Esc first clears the search, then closes on a second press.

Loading preview…

npx shadcn@latest add https://webberui.com/r/shortcut-cheatsheet.json

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Panel titletitle

Search box placeholdersearchPlaceholder

Enable the ? hotkeyhotkey

<ShortcutCheatsheet />

Installation

npx shadcn@latest add https://webberui.com/r/shortcut-cheatsheet.json

Or, once registries are configured in components.json, install it as @webberui/shortcut-cheatsheet.

Usage

import { ShortcutCheatsheet } from "@/components/ui/shortcut-cheatsheet";

<ShortcutCheatsheet
  groups={[
    {
      title: "Navigation",
      items: [
        { keys: ["⌘", "K"], label: "Open the command palette" },
        { keys: ["G", "H"], label: "Go back home" },
      ],
    },
    {
      title: "Editing",
      items: [{ keys: ["⌘", "Z"], label: "Undo the last step" }],
    },
  ]}
/>

Without open the component is uncontrolled and pressing ? opens it; when you want your own trigger button, switch to controlled mode by passing open together with onOpenChange.

Props

Prop	Type	Default	Description
`groups`	`ShortcutGroup[]`	—	Shortcut group data, shaped as `{ title, items: { keys: string[], label }[] }`
`open`	`boolean`	—	Controlled open state; when not provided, the component manages it internally
`onOpenChange`	`(open: boolean) => void`	—	Open-state change callback (fires for `?` opening as well as Esc or an overlay click closing)
`hotkey`	`boolean`	`true`	Whether to listen globally for the `?` key to summon the panel
`title`	`string`	`"鍵盤快捷鍵"`	Panel title
`searchPlaceholder`	`string`	`"搜尋快捷鍵⋯"`	Placeholder text for the search box
`className`	`string`	—	Forwarded to the outermost overlay container

Accessibility

The panel uses role="dialog" with aria-modal, focuses the search box automatically on open, and returns focus to the previous element after closing
While focus is in an input, textarea, or other editable element, pressing ? does not open it by accident
Esc has two stages: while the search box has text it clears first, and only a second press closes the panel
Keycaps are rendered as semantic kbd elements, and each group is a section with an aria-label
When the user has "reduce motion" enabled at the system level, the panel only fades in and out, with no scale or offset animation