Installation
Usage
Add Palette component to your root layout to enable shortcut overlay.
Register keyboard shortcuts with Shortcut component:
For focusing elements (like inputs), use Focus component:
or attach shortcuts directly to an element using:
This focuses the element it attaches to directly, as opposed to the Focus component, which wraps the children in a div and focuses that.
Shortcuts appear in the Palette and run their actions, as long as the
component is mounted. That means you ca easily have different shortcuts in different routes of
your site.
Demo
Show Incant Palette
Press ? to open shortcut palette and see all registered shortcuts.
Or click the button it bottom right corner of the screen.
Use with inputs
Press ⌥ (alt) to see the focus shortcut hint. Or press ⌃ E to focus the input below.
Use with complex components
Press ⌥ (alt) to see the focus shortcut hint. Press ⌘ K to focus the combobox.
Full combobox code from https://shadcn-svelte.com/docs/components/combobox
Configuration
The Palette component accepts a position prop to control where the
trigger button appears:
Available positions:
- (default)
- (hides the trigger button)