Vanilla UI Kit Command Palette v1.0.0 · toast →

Every action, one keystroke.

A zero-dependency Ctrl/Cmd+K palette with fuzzy search, groups, shortcuts, and full keyboard control. Try it — everything on this page is wired up.

Nothing run yet — try “theme”, “toast”, or just “sf”.

Register & go

One static call; the palette, hotkey, and styles bootstrap themselves lazily.

CommandPalette.register([
  { id: 'save', label: 'Save file',
    hint: 'Ctrl+S', group: 'Actions',
    action: function () { save() } }
])   // Ctrl/Cmd+K just works

Fuzzy matching

Case- and diacritic-insensitive subsequence match with word-start and consecutive-run bonuses. Matched letters are highlighted.

Open the palette and type sf → Save file, or resume → Résumé template.

{ id: 'docs', label: 'Open documentation',
  keywords: 'help manual guide' }

Theme commands

These commands actually flip this page's theme — the palette (and the whole family) follows <html data-theme> live.

{ id: 'theme-dark', label: 'Theme: Dark',
  group: 'Theme',
  action: function () { setTheme('dark') } }

Recent commands

With recent: true, the last five run commands surface in a “Recent” group — in memory only, per page load.

CommandPalette.defaults.recent = true

Live registry

Register and unregister at any time; re-registering an id replaces it in place. Disabled commands render grayed out.

CommandPalette.register({ id: 'secret', … })
CommandPalette.unregister('secret')

Quick start

One file from the CDN. Keyboard: ↑↓ navigate, ↵ run, esc clears the query, then closes.

<script src="https://cdn.jsdelivr.net/gh/
  vanilla-ui-kit/components/command/command.js">
</script>