Keyboard Map Overlay

Keyboard shortcut map for a screen: search, keyboard view and practice mode. Pro · Navigation and layout › Menus and commands

The keyboard shortcuts of the current screen as a map: grouped and searchable, with the keys drawn on a keyboard, and a practice mode — press any combination and the map shows what it does and counts the shortcuts learned. Opens with "?" as a dialog, or renders in place.

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add keyboard-map-overlay

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { KeyboardMapOverlay } from 'valyro-ui-pro';

Props

Prop	Type	Default
`shortcuts` *	`KeyboardShortcut[]`		Shortcuts of the current screen.
`open`	`boolean`		The map is open (dialog mode).
`defaultOpen`	`boolean`	`false`	Initial state when uncontrolled. Default false.
`onOpenChange`	`(open: boolean) => void`		Called when the map opens or closes.
`trigger`	`string \| null`	`'?'`	Key that opens the map anywhere on the page, outside text fields; `null` turns it off. Default "?".
`inline`	`boolean`	`false`	Render in place (a help page) instead of a dialog.
`learned`	`string[]`		Ids of shortcuts the person has practised.
`defaultLearned`	`string[]`	`EMPTY`	Initial learned ids when uncontrolled.
`onLearnedChange`	`(learned: string[]) => void`		Called when a practised shortcut is pressed for the first time.
`title`	`ReactNode`		Heading. Default: `labels.title`.
`labels`	`Partial<KeyboardMapOverlayLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Related components

Dropdown Menu — Dropdown menu
Context Menu — Right-click menu
Command Palette — ⌘K-style command menu
App Shell — Application frame
Navbar — Top navigation bar
Sidebar — Side navigation panel
Resizable Panels — Panels with draggable dividers
Breadcrumbs — Breadcrumb trail
Tabs — Tabs
Segmented Control — Mode switcher
Pagination — Page navigation
Stepper — Step-by-step progress

Previous: Command Palette · Next: Alert · All Navigation and layout