TuxCommandPalette

Live Component Playground

TuxCommandPalette Workbench

(press CtrlK anywhere for global shell palette)

Properties Inspector4 configurable knobs

Input Placeholderplaceholder

Default Filter TabdefaultTab

Show Filter TabsshowTabs

true

Trigger Hotkeyhotkey

Dynamic Component Syntax

<tux-command-palette placeholder="Type a command, token (--), component (@), or search…" defaultTab="all" showTabs hotkey="k" />

productivity

Instant Filter Prefixes

Users can jump straight into specific subsystems simply by typing a single lead character:

>Quick Actions

Type > to filter to system commands, theme toggles, and framework switches.

--Design Tokens

Type -- or token: to inspect color swatches, roles, and copy CSS variables.

@Component Lab

Type @ or comp: to search across all 150+ catalogued TUX components.

#Documentation

Type # or doc: to search design doctrines, ADR records, and guides.

architecture

Why native `<dialog>`

The browser natively provides modal focus trapping, ESC-to-close behavior, inert backdrop rendering, and proper accessibility roles when using showModal(). The TUX command palette builds upon this native standard, adding reactive keyboard list traversal, token swatch previewing, and non-intrusive toast integration.

<script setup>
import { ref } from "vue";

const paletteRef = ref(null);
const groups = [
  {
    heading: "⚡ Actions",
    category: "actions",
    items: [
      { id: "act-theme", label: "Toggle Dark Mode", action: () => toggleTheme() }
    ]
  },
  {
    heading: "🎨 Design Tokens",
    category: "tokens",
    items: [
      { id: "tok-primary", label: "--brand-primary", tokenValue: "#5C0025", isColor: true, copyText: "var(--brand-primary)" }
    ]
  }
];
</script>

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