Svelte Command Palette
A command palette is a list of commands plus fuzzy matching plus a global hotkey, and the hard parts are the ones nobody demos: trapping focus, locking the scroll behind it, dismissing on Escape or an outside click without breaking the layer underneath. SvCommand sits on the same primitives the grid's own popovers use, so those are already handled.
You give it an array of commands with an id, a label, an optional group and a shortcut, and a function to run. It opens on Cmd+K or Ctrl+K by default, or you can drive the open state yourself.
Install
npm i @svgrid/gridFree and MIT-licensed in @svgrid/grid: no license key, no row cap, no watermark.
The code
<script lang="ts">
import { SvCommand, type CommandItem } from '@svgrid/grid'
const commands: CommandItem[] = [
{ id: 'new', label: 'New record', group: 'Actions', shortcut: 'Ctrl+N', onRun: create },
{ id: 'export', label: 'Export CSV', group: 'Actions', onRun: exportCsv },
{ id: 'docs', label: 'Open docs', group: 'Help', onRun: () => goto('/docs') },
]
</script>
<!-- Cmd/Ctrl+K opens it -->
<SvCommand {commands} onRun={(c) => track(c.id)} />What you get
- Fuzzy matching - Type a few letters from anywhere in a label and the command surfaces, with extra keywords per item for the words people actually use.
- Groups and shortcuts - Commands cluster under headings and can display their own keyboard shortcut, so the palette doubles as a shortcut cheat sheet.
- Global hotkey - Cmd+K on a Mac and Ctrl+K elsewhere by default, configurable, and it does not fire while the user is typing in an input.
- Keyboard first - Arrow keys move, Enter runs, Escape closes, and focus returns to where it was. Focus is trapped while it is open.
- Bindable open state - bind:open lets a button, a menu item or a route change open the palette, not just the hotkey.
- Free and MIT - SvCommand is in @svgrid/grid, dependency-free, and shares the focus and dismissable primitives with every other overlay.
Live examples
- Command palette (⌘K) + sparklines, avatars, scroll - SvCommand: a ⌘K fuzzy command palette built on the shared focus-trap / scroll-lock / dismissable primitives (arrow-key nav, groups, shortcuts, global hotkey). Plus SvSparkline (inline line/area/bar/win-loss charts), SvAvatarGroup (stacked members + overflow) and SvScrollArea (themed scrollbars).
- App shell block - A complete application layout: a SvNavPane sidebar with sections + badges, a top bar with SvBreadcrumb, search and an account SvMenu, and a routed content area. Nav swaps the page; the toggle collapses the rail to an icon rail.
Documentation
- SvCommand - A Cmd+K command palette: a fuzzy-searchable list of actions in a centered, focus-trapped dialog, with an optional global hotkey.
- Navigation - Wayfinding components for admin apps and Studio-generated screens. Pure, keyboard-accessible, theme-token driven.
Related articles
- SvGrid UI Components Tips and Tricks: Svelte 5 Buttons, Inputs, Tree, Forms - Practical tips for the SvGrid UI component kit - SvButton states, a Cmd+K command palette, a virtualized searchable tree, schema-driven forms, a parsing date/time field, and the shared field contract - each with a code snippet.
Frequently asked questions
How do I add a Cmd+K command palette to a Svelte app?
Import SvCommand from @svgrid/grid, pass an array of commands with id, label and onRun, and render it once near the root of your layout. The Cmd or Ctrl plus K hotkey is wired by default.
Can I open it from a button?
Yes. Use bind:open and set it to true from anywhere, which is how the header search buttons in the demos work.
Is it accessible?
It traps focus while open, restores focus on close, locks the background scroll and is fully operable with the arrow keys, Enter and Escape.
Is the command palette free?
Yes. SvCommand is MIT-licensed in @svgrid/grid and pulls in no third-party dependency.