## Keyboard Shortcuts Sheet (S—130)

A searchable keyboard-shortcut reference grouped by area; press ? to open it, and typing filters keys and names.

- URL: https://sundaeui.dev/components/shortcuts-sheet
- Category: UI components · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/shortcuts-sheet.json`
- Tags: reference, cheat-sheet, search, hotkeys, keyboard-shortcuts, help

Groups like General, Navigation and Editing list each command with its keys drawn as caps. The search matches command names and key names, and empty groups hide.
Press ? anywhere to toggle it. On Windows the ⌘ caps read Ctrl.

### Usage

```tsx
import { ShortcutsSheet } from '@/components/sundae/shortcuts-sheet'

<ShortcutsSheet />
```

### Props

- `groups` (`{ title: string; items: { label: string; keys: string[] }[] }[]`, required): Shortcut groups.
- `platform` (`'mac' | 'win'`, default `'mac'`): Key labels.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Power-user apps: editors, email, project tools.

### When not to use

- Apps with only a couple of shortcuts: list them in tooltips.

### Accessibility

- A labelled region with a search input; each row exposes keys as text (“Command K”).
- The ? shortcut is ignored while typing in a field.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- ?: Toggle the sheet