Shortcut Cheatsheet

A searchable overlay that lists keyboard shortcuts by section, opened with a key.

@drift-ui/shortcut-cheatsheetRegistry JSONGitHubOpen in v0

Or press ?

Keyboard

?
Open the cheatsheet
Escape
Close it

The CLI also installs the npm packages and registry items it builds on, and reads the style in your components.json to pick the Base UI or Radix build.

shortcut-cheatsheet-usage.tsx
"use client"

import { useState } from "react"
import { ShortcutCheatsheet } from "@/components/ui/shortcut-cheatsheet"
import { Button } from "@/components/ui/button"

const sections = [
  {
    title: "Navigation",
    shortcuts: [
      { keys: "Mod+K", label: "Search" },
      { keys: "G", label: "Go to inbox" },
    ],
  },
]

export function HelpMenu() {
  const [open, setOpen] = useState(false)

  return (
    <>
      <Button variant="ghost" onClick={() => setOpen(true)}>Keyboard shortcuts</Button>
      <ShortcutCheatsheet sections={sections} open={open} onOpenChange={setOpen} />
    </>
  )
}

ShortcutCheatsheet

A dialog that lists shortcuts by section with a search field. It renders no button of its own: press the trigger, or set open from your own control.

Prop
sectionsRequired{ title: string; shortcuts: { keys: string; label: string }[] }[]Shortcuts by section. keys uses the ShortcutRecorder format, such as "Mod+K".
triggerstringDefault"?"A character, or a shortcut string such as "Mod+/", that opens the cheatsheet from anywhere on the page except text fields. An uppercase letter reads as a shortcut, so "G" is the G key without Shift. An empty string turns it off.
openbooleanControlled open state.
defaultOpenbooleanDefaultfalseInitial open state when uncontrolled.
onOpenChange(open: boolean) => voidCalled when the cheatsheet opens or closes.

Other props go to the DialogContent.

filterSections, matchesTrigger

filterSections(sections: CheatsheetSection[], query: string): CheatsheetSection[]; matchesTrigger(event: KeyboardEvent, trigger: string, isMac: boolean): boolean

Import from @/lib/shortcut-cheatsheet to reuse the search or the trigger check outside the dialog.

Customised bindings

Pass the values from a ShortcutRecorder into sections and the cheatsheet shows what the user actually bound.

Another trigger

trigger takes a recorded shortcut as well as a character, such as "Mod+/". Set it to an empty string to open the cheatsheet only from your own controls.

Press Ctrl/

components/ui/shortcut-cheatsheet.tsx
CtrlK