Cmd+K Command Palette
Keyboard-first command palette: Cmd+K launcher, fuzzy filtering as you type, arrow-key selection and Enter to run.
About This Component
Keyboard-first command palette: Cmd+K launcher, fuzzy filtering as you type, arrow-key selection and Enter to run. A single self-contained component: one HTML file, one stylesheet, one script, vanilla JavaScript and GSAP, no framework. Ships in three looks, vault, paper and glass, switched with one data-variant attribute; the script is identical in all three.
What's Included
- Cmd+K / Ctrl+K opens, Escape or a backdrop click closes
- Subsequence fuzzy filter hides non-matching rows as you type
- ArrowUp/Down wrap within the visible rows; Enter flashes the selected row
- Rows are plain list items; add as many as you need
- combobox / listbox / option ARIA roles
- Three shipped variants: vault, paper, glass
Perfect For
- Global search in web apps and admin portals
- Developer tools and dashboards with many actions
- Documentation sites with keyboard navigation
How It Works
Opening and closing
Cmd+K / Ctrl+K is bound on the document, so it toggles the palette wherever focus is. The window scales up from 0.94 as the backdrop fades in; closing reverses it and hides the overlay on complete, so no invisible layer is left covering the page. Focus moves to the input on open and back to the launcher on close.
Fuzzy filter and selection
Every keystroke runs a subsequence match over each row's label and toggles hidden; the selection index only ever lands on a visible row, and the highlight tweens between rows instead of snapping.