About this set
A command palette in the style of modern web apps, built with current platform features instead of a modal library. A trigger that looks like a search field opens a dialog element as a modal through invoker commands, command=”show-modal” and commandfor, so opening, the backdrop, focus trapping and Escape to close all come from the browser. @starting-style with transition-behavior: allow-discrete fades and lifts the dialog in and out, and the backdrop is blurred. Inside, a combobox filters a grouped listbox of commands such as Create new issue, Billing and plans and Keyboard shortcuts. :has() does the bookkeeping: a group disappears when none of its options match, and a no-results message appears when nothing does. A short script adds the Cmd K or Ctrl K shortcut, the filtering, arrow-key movement and Enter to run, and falls back to showModal() where invoker commands are not supported. The same panel also works inline as a quick switcher for projects and people, shown below the trigger.
What’s included
- Modal dialog opened with command and commandfor, no modal library
- Entry and exit animation with @starting-style and allow-discrete
- Grouped listbox; :has() hides empty groups and shows a no-results message
- Cmd K or Ctrl K shortcut, arrow keys and Enter
- Same panel works inline as a quick switcher
Accessibility
The dialog has an accessible name and is modal, so focus stays inside until it closes with Escape, the Esc button or a click on the backdrop. The input is a combobox named by a hidden label inside a form with role="search"; options live in labelled groups and the active one is tracked with aria-activedescendant and aria-selected. A status message announces the number of results. Buttons show a 2px outline on focus and the animations are removed under prefers-reduced-motion.
Customise it
Change --ck-accent, --ck-soft and --ck-line on .ck-panel and .ck-trigger for colour, and the width and max-height on .ck-dialog for size. Replace the options with your own commands and listen for the cmdk:run event to act on them. In Tailwind edit the --color-ck-* theme colours.
