'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Overlays
KeyboardShortcuts
Every keyboard shortcut of an app in one searchable dialog, opened with "?" from anywhere. The main modifier shows as the key of each system (⌘ or Ctrl), and sequences read as "G then I".
import { KeyboardShortcuts } from '@alea/ui';
Examples
Shortcuts
Press ? anywhere on this page (outside a text field), or the button. Search by what a shortcut does; "mod" shows as the main modifier of each system (⌘ or Ctrl).
Tokens
The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.
Color
--alea-border…--alea-text-muted…
Space
--alea-space-2…--alea-space-3…--alea-space-6…--alea-space-8…
Type
--alea-font-family-body…--alea-font-size-sm…--alea-font-size-xs…--alea-font-weight-semibold…
Props
KeyboardShortcuts props
Every keyboard shortcut of an app in one searchable dialog, opened with "?" from anywhere. The main modifier shows as each system's own key (⌘ or Ctrl); sequences ("G then I") read as such.
| Prop | Type | Default | Description |
|---|---|---|---|
groupsrequired | { title: string; shortcuts: Shortcut[]; }[] | - | The shortcuts in groups: Navigation, Actions, Editing. |
isOpen | boolean | - | Open (controlled). Leave out and pass openKey to open it from the keyboard. |
onOpenChange | ((open: boolean) => void) | - | Called when it opens or closes. |
openKey | string | false | '?' | A key that opens it from anywhere (outside text fields). Default "?". |
title | ReactNode | - | The title. Default "Keyboard shortcuts". |
trigger | ReactNode | - | A button that opens it. |
Specs
Generated from the source: the variants in the types, the states and tokens in the CSS, and the motion patterns that apply. The grids render the real component in both themes; the numbers are measured from the page.
- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-kbs-empty.alea-kbs.alea-kbs-group.alea-kbs-title.alea-kbs-list.alea-kbs-row.alea-kbs-combo.alea-kbs-then.alea-kbd
Accessibility
- A modal dialog with a title; the search field gets focus when it opens.
- Each shortcut is a description term (what it does) and its keys, so screen readers read "Search, Command K".
- "?" opens it only outside text fields, so typing a question mark in a form never opens it.
Keyboard
| Key | Does |
|---|---|
| ? | Opens it from anywhere outside a text field |
| Escape | Closes it |
Do and don't
Do
- Group shortcuts the way the app is organized: Navigation, Actions, Editing.
- Use "mod" for the main modifier so each platform sees its own key.
Don't
- Don't list shortcuts that are not wired.
- Don't take over keys the browser or screen readers use.
In Figma
KeyboardShortcuts as a dialog with groups of rows and key caps.