Command Palette

<!-- Trigger -->
<button class="btn" onclick="document.getElementById('cmd-demo').dataset.state='open'">
  <kbd class="text-xs opacity-60">⌘K</kbd> Search...
</button>

<!-- Command Palette -->
<div class="command-backdrop" id="cmd-demo" data-state="closed">
  <div class="command">
    <div class="command-search">
      <svg class="command-search-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
      <input class="command-input" placeholder="Type a command or search..." />
      <div class="command-shortcut">
        <span class="command-key">esc</span>
      </div>
    </div>
    <div class="command-results">
      <div class="command-group">
        <div class="command-group-title">Actions</div>
        <ul class="command-list">
          <li class="command-item command-item-active">
            <div class="command-item-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg></div>
            <div class="command-item-content">
              <div class="command-item-title">New File</div>
              <div class="command-item-description">Create a new document</div>
            </div>
            <div class="command-item-shortcut"><span class="command-key">⌘</span><span class="command-key">N</span></div>
          </li>
          <li class="command-item">
            <div class="command-item-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></div>
            <div class="command-item-content">
              <div class="command-item-title">Edit Settings</div>
            </div>
            <div class="command-item-shortcut"><span class="command-key">⌘</span><span class="command-key">,</span></div>
          </li>
        </ul>
      </div>
      <div class="command-group">
        <div class="command-group-title">Recent</div>
        <ul class="command-list">
          <li class="command-item">
            <div class="command-item-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/></svg></div>
            <div class="command-item-content">
              <div class="command-item-title">package.json</div>
            </div>
            <span class="command-recent">recent</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="command-footer">
      <div class="command-footer-hints">
        <div class="command-footer-hint"><span class="command-key">↑↓</span> navigate</div>
        <div class="command-footer-hint"><span class="command-key">↵</span> select</div>
        <div class="command-footer-hint"><span class="command-key">esc</span> close</div>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="fixed inset-0 z-400 bg-black/50">
  <div class="fixed top-[15%] left-1/2 -translate-x-1/2 w-[95%] max-w-160 max-h-[70dvh] bg-base-100 rounded-box shadow-2xl overflow-hidden">
    <div class="flex items-center gap-3 px-4 py-3 border-b border-base-300">
      <svg class="size-5 text-base-content/40" ...></svg>
      <input class="flex-1 h-10 text-lg bg-transparent border-none outline-none" placeholder="Type a command..." />
      <kbd class="px-1.5 py-0.5 text-xs bg-base-200 border border-base-300 rounded">esc</kbd>
    </div>
    <div class="max-h-[calc(70dvh-80px)] overflow-y-auto">
      <!-- Groups and items... -->
    </div>
  </div>
</div>

Requires: tw.min.css

// Open: backdrop.dataset.state = 'open';
// Close: backdrop.dataset.state = 'closed';
// Keyboard shortcut:
// document.addEventListener('keydown', (e) => {
//   if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
//     e.preventDefault();
//     backdrop.dataset.state = 'open';
//   }
// });

<!-- Empty state -->
<div class="command-empty">
  <svg class="command-empty-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
  <div class="command-empty-title">No results found</div>
  <div class="command-empty-description">Try a different search term</div>
</div>

<!-- Loading state -->
<div class="command-loading">
  <div class="command-loading-spinner"></div>
</div>

Requires: ux.min.css

<!-- Empty state -->
<div class="flex flex-col items-center justify-center text-center py-8">
  <svg class="w-12 h-12 opacity-50 text-base-content/40 mb-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
  <div class="font-medium text-[0.9375rem] text-base-content/60 mb-1">No results found</div>
  <div class="text-[0.8125rem] text-base-content/40">Try a different search term</div>
</div>

<!-- Loading state -->
<div class="flex items-center justify-center py-6">
  <div class="w-6 h-6 border-2 border-base-300 border-t-primary rounded-full animate-spin"></div>
</div>

Requires: tw.min.css

// Show loading while fetching results, then swap to list or empty state