component
TuxShortcutsHelp
Modal overlay listing every wired keyboard shortcut. Built on the native
<dialog> element so focus trap, scrim, and ESC-to-close come free — same anatomy as TuxCommandPalette so the two read as siblings. Mount once at app root and open on ? via defineShortcuts. try it
Press ? from anywhere
The style-guide shell mounts a real shortcuts overlay globally — so the hotkey already works on this page. The button below opens this page's local instance for visual reference.
…or press ? for the global one
design
Combos vs sequences
The component classifies each shortcut by inspecting its keys array. If any key is a modifier (meta / ctrl / shift / alt), the row renders a single TuxKbd with + joiners — a combo. Otherwise each key becomes its own TuxKbd separated by an italicized "then" — a sequence (Vim-style g t). Single-key shortcuts render as one TuxKbd.
setup
Install at app root
Place a single <TuxShortcutsHelp> in app.vue alongside TuxCommandPalette, then wire ? via Nuxt UI's defineShortcuts:
<script setup>
const helpRef = ref(null);
const groups = [/* ... */];
defineShortcuts({
"?": { handler: () => helpRef.value?.toggle() },
});
</script>
<template>
<TuxShortcutsHelp ref="helpRef" :groups="groups" />
</template>props
Props + shortcut shape
groups— array of{ heading, items }. Required.- Each item —
{ keys: string[], label: string, description?: string }. sequenceSeparator— text between sequence keys (defaults to"then").- Exposes
.open(),.close(),.toggle()via template ref.