ShortcutHelp

Markdown

A sheet listing the keyboard shortcuts your app handles.

Use it for
A list of the keyboard shortcuts this page actually handles.
Not for
A command menu for jumping to pages. Try CommandPalette or Kbd.

ShortcutHelp preview

Open the sheet to read the shortcuts this page handles.

Installation

npm install @stackunseen/ui
import { ShortcutHelp } from '@stackunseen/ui';
Styles: @stackunseen/ui/styles.css

Usage and props

Pass only shortcuts the page actually handles. The sheet does not listen for those keys. useShortcutHelp opens it on ? outside a text field; turn it off while the sheet is open.

Supported inputs

This is the public signature used by this example. Open Code to see how the values and callbacks fit together.

open · onOpenChange · shortcuts: { id, label, keys, group? }[] · title? · description? · useShortcutHelp(onOpen, enabled?)
How state and callbacks work
All props

Loading…

For your coding agent

Give the agent this page instead of a screenshot. The prompt wraps the page with the install and import lines and the rule that your server, not a click, completes an action.

Contract
open · onOpenChange · shortcuts: { id, label, keys, group? }[] · title? · description? · useShortcutHelp(onOpen, enabled?)
Keeps honest
Pass only shortcuts the page actually handles. The sheet does not listen for those keys. useShortcutHelp opens it on ? outside a text field; turn it off while the sheet is open.
MCP
read_component "ShortcutHelp" on the docs endpoint
Open the Markdown file

Keyboard and customization

Keyboard

Opening moves focus into the sheet. Tab stays inside; Escape or Close returns focus to the opener.

Customization

Change shared colors, spacing, corners and icons with the theme. Use the component's supported props to adapt its content and layout. Customization guide and Theme Studio