# ShortcutHelp

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](https://unseenui.com/components/command-palette/), [Kbd](https://unseenui.com/components/kbd/).

## Installation

```bash
npm install @stackunseen/ui
```

## Usage

```tsx
import { ShortcutHelp } from '@stackunseen/ui';
import { Kbd, CommandPalette } from '@stackunseen/ui';
import '@stackunseen/ui/styles.css';

<ShortcutHelp open={open} onOpenChange={setOpen} shortcuts={[{ id: "send", label: "Send", keys: ["Enter"] }]} />
```

## All props

| Prop | Type | Description |
| --- | --- | --- |
| `className` | `string` | Added to the root element, after the component's own classes. |
| `description` | `string` |  |
| `onOpenChange` (required) | `(open: boolean) => void` |  |
| `open` (required) | `boolean` |  |
| `shortcuts` (required) | `readonly ShortcutItem[]` | The shortcuts this app actually handles. |
| `title` | `string` |  |

## Keyboard

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

## Works with

[CommandPalette](https://unseenui.com/components/command-palette/), [TableOfContents](https://unseenui.com/components/table-of-contents/), [Breadcrumb](https://unseenui.com/components/breadcrumb/), [Tabs](https://unseenui.com/components/tabs/), [Stepper](https://unseenui.com/components/stepper/), [Pagination](https://unseenui.com/components/pagination/), [Popover](https://unseenui.com/components/popover/), [Tooltip](https://unseenui.com/components/tooltip/), [AlertDialog](https://unseenui.com/components/alert-dialog/), [Modal](https://unseenui.com/components/modal/)

Page: https://unseenui.com/components/shortcut-help/