TuxCommandPalette

try it

Press CtrlK from anywhere

The style-guide shell mounts a real palette globally — so the hotkey already works on this page, jumping to the same routes as the sidebar. The button below opens this page's local instance for visual reference; its hotkey is disabled to avoid racing with the global one.

design

Why native <dialog>

The browser handles focus trap, ESC-to-close, scrim rendering, and ARIA semantics out of the box when you use showModal(). Wrapping a custom modal would replicate all of that imperatively. The only thing we add: a global keydown listener for ⌘K / Ctrl+K to toggle the dialog.

setup

Install at app root

Place a single <TuxCommandPalette> in app.vue. It self-registers the ⌘K hotkey for the whole app. To open it from a button, hold a ref and call .open():

<script setup>
const paletteRef = ref(null);
const groups = [/* ... */];
</script>

<template>
  <TuxCommandPalette ref="paletteRef" :groups="groups" />
  <TuxButton @click="paletteRef.open()">Search</TuxButton>
</template>

props

Props + commands

• groups — array of { heading, items }. Required.
• Each item — { id, label, description?, icon?, shortcut?, to?, href?, action? }.
• placeholder — input placeholder. Defaults to "Type a command or search…".
• disableHotkey — turn off the global ⌘K listener (rare).
• hotkey — override the trigger key. Defaults to "k".
• Exposes .open() + .close() via template ref.