Command — Vanilla

Command palette (e.g. ⌘K) with vanilla HTML and Rizzo CSS. Add JS for open/close and search.

Command

Command palette: overlay + dialog with search and list. Classes: command-root, command__overlay, command__dialog, command__search, command__list, command__item. Add JavaScript to toggle visibility on trigger click and ⌘K, and to filter items by search input.

Add this component

Run the command below in your project directory. When prompted, select the component(s) you want. The CLI will copy the CSS and component files.

Choose your package manager — click a tab to select, then copy the command.

npm pnpm yarn bun

HTML

html html 
<!-- Rizzo CSS. Command palette: .command-root, .command__overlay, .command__dialog, .command__search, .command__list, .command__item. Add JS for open/close (e.g. data-command-trigger, ⌘K). See /docs/vanilla/components/command. -->
<div class="command-root">
  <button type="button" class="btn btn-outline" data-command-trigger>Open command palette (⌘K)</button>
  <div class="command__overlay" aria-hidden="true" hidden></div>
  <div class="command__dialog" role="dialog" aria-modal="true" aria-label="Command palette" aria-hidden="true" hidden>
    <div class="command__search-wrap"><input type="search" class="command__search" placeholder="Search…" /></div>
    <div class="command__list" role="listbox"><button type="button" class="command__item">New file <kbd>⌘N</kbd></button><button type="button" class="command__item">Save <kbd>⌘S</kbd></button></div>
  </div>
</div>

Other frameworks: Astro · Svelte · Vue · React