Shortcut Sheet
A keyboard reference grouped by area. Presentational by design — it never binds the keys, because the component that shows a cheat sheet is not the one that owns the handlers.
src/components/ui/shortcut-sheet.tsxAbout
From the component's own source, where it was written.
A keyboard reference, grouped by area.
Presentational only — it renders a map of shortcuts and nothing else. It does not bind them, because the component that displays a cheat sheet is never the one that owns the handlers, and a sheet that silently registered global keys would fight whatever actually implements them.
Keys are given as arrays so the modifier chain stays data: ['Meta', 'K'] renders two caps, and the same array can drive a matcher elsewhere.
Install
npx astralyx-ui add shortcut-sheet
Usage
import { ShortcutSheet } from '@/components/ui/shortcut-sheet'
<ShortcutSheet groups={groups} />Composer
Change the props and the source below follows.
General
- Open command palette
- ⌘K
- Toggle sidebar
- ⌘B
- Keyboard shortcuts
- ⌘/
- Dismiss
- Esc
Editor
- Save file
- ⌘S
- Go to file
- ⌘P
- Search in project
- ⌘⇧F
- Move line up
- ⌥↑
<ShortcutSheet groups={groups} columns={true} />Examples
Reference
<ShortcutSheet groups={groups} />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
ShortcutSheet
A keyboard reference, grouped by area.
Extends ComponentProps<'div'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| groups | ShortcutGroup[] | required | { label, shortcuts } where a shortcut is { keys: string[], label }. |
| columns | boolean | true | Two columns from sm up. |
Types
Shortcut
| Field | Type | Description |
|---|---|---|
| keys | string[] | The modifier chain stays data, so the same array can drive a matcher elsewhere rather than being re-parsed from a string. |
| label | ReactNode | — |
ShortcutGroup
| Field | Type | Description |
|---|---|---|
| label | string | — |
| shortcuts | Shortcut[] | — |