Command Palette

Searchable command/action interface.

html

<div class="cmdk-demo cmdk-demo--backdrop">
  <div class="cmdk" style="width:420px;" role="dialog" aria-modal="true" aria-labelledby="cmdk-title">
    <div class="cmdk__header" id="cmdk-title">Quick actions</div>
    <div class="cmdk__search">
      <svg class="cmdk__search-icon" viewBox="0 0 20 20" aria-hidden="true" width="16" height="16"><circle cx="8.5" cy="8.5" r="6" fill="none" stroke="currentColor" stroke-width="1.6"></circle><line x1="13.2" y1="13.2" x2="18" y2="18" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"></line></svg>
      <input class="cmdk__input" type="text" value="new" aria-label="Quick actions" readonly />
    </div>
    <ul class="cmdk__list cmdk__list--new-file" role="listbox" aria-label="Matching commands">
      <li class="cmdk__row" data-cmd="new-file" role="option" aria-selected="true">
        <span class="cmdk__row-icon" aria-hidden="true">＋</span>
        <span class="cmdk__row-label">New file</span>
        <span class="cmdk__row-kbd">⌘N</span>
      </li>
      <li class="cmdk__row" data-cmd="share" role="option" aria-selected="false">
        <span class="cmdk__row-icon" aria-hidden="true">↗</span>
        <span class="cmdk__row-label">Share document</span>
        <span class="cmdk__row-kbd">⌘S</span>
      </li>
      <li class="cmdk__row" data-cmd="settings" role="option" aria-selected="false">
        <span class="cmdk__row-icon" aria-hidden="true">⚙</span>
        <span class="cmdk__row-label">Settings</span>
        <span class="cmdk__row-kbd">⌘,</span>
      </li>
    </ul>
    <button type="button" class="cmdk__close" style="color:#BFD9F2;" aria-label="Close command palette">
      <svg viewBox="0 0 20 20" width="14" height="14" aria-hidden="true"><line x1="4" y1="4" x2="16" y2="16" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"></line><line x1="16" y1="4" x2="4" y2="16" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"></line></svg>
    </button>
  </div>
</div>
<style>
.cmdk-demo { display: grid; place-items: center; min-height: 320px; border-radius: 12px; padding: 24px; box-sizing: border-box; }
.cmdk-demo--backdrop { background: rgba(36,20,48,.45); }
.cmdk { position: relative; font: 15px/1.5 system-ui, sans-serif; background: #FAF7F2; color: #241430; border-radius: 14px; box-shadow: 0 20px 44px rgba(36,20,48,.28); padding: 18px; box-sizing: border-box; }
.cmdk__header { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #241430aa; margin-bottom: 10px; }
.cmdk__search { display: flex; align-items: center; gap: 8px; border: 1.5px solid #24143025; border-radius: 8px; padding: 9px 12px; margin-bottom: 10px; }
.cmdk__search-icon { color: #24143080; flex-shrink: 0; }
.cmdk__input { border: none; outline: none; background: none; font: inherit; color: inherit; width: 100%; }
.cmdk__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.cmdk__row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; }
.cmdk__row-icon { width: 18px; text-align: center; }
.cmdk__row-label { flex: 1; }
.cmdk__row-kbd { font-size: 11px; color: #24143099; border: 1px solid #24143025; border-radius: 4px; padding: 1px 5px; }
.cmdk__list--new-file .cmdk__row[data-cmd="new-file"],
.cmdk__list--share .cmdk__row[data-cmd="share"],
.cmdk__list--settings .cmdk__row[data-cmd="settings"] { background: #BFD9F233; }
.cmdk__close { position: absolute; top: 14px; right: 14px; background: none; border: none; cursor: pointer; padding: 4px; border-radius: 6px; }
.cmdk__close:focus-visible, .cmdk__row:focus-within { outline: 2px solid #241430; outline-offset: 2px; }
</style>

tailwind

<div class="grid place-items-center min-h-[320px] rounded-xl p-6 box-border bg-[#241430]/45">
  <div role="dialog" aria-modal="true" aria-labelledby="cmdk-tw-title" class="cmdk-tw relative font-sans text-[15px] leading-relaxed bg-[#FAF7F2] text-[#241430] rounded-2xl shadow-2xl p-[18px] box-border" style="width:420px;">
    <div id="cmdk-tw-title" class="text-xs font-bold tracking-wide uppercase text-[#241430]/70 mb-2.5">Quick actions</div>
    <div class="flex items-center gap-2 border-[1.5px] border-[#24143025] rounded-lg px-3 py-2.5 mb-2.5">
      <svg class="text-[#241430]/50 shrink-0" viewBox="0 0 20 20" aria-hidden="true" width="16" height="16"><circle cx="8.5" cy="8.5" r="6" fill="none" stroke="currentColor" stroke-width="1.6"></circle><line x1="13.2" y1="13.2" x2="18" y2="18" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"></line></svg>
      <input class="border-none outline-none bg-transparent w-full" type="text" value="new" aria-label="Quick actions" readonly />
    </div>
    <ul class="cmdk-tw-list cmdk-tw-list--new-file list-none m-0 p-0 flex flex-col gap-0.5" role="listbox" aria-label="Matching commands">
      <li class="flex items-center gap-2.5 px-2.5 py-2.5 rounded-lg" data-cmd="new-file" role="option" aria-selected="true">
        <span class="w-[18px] text-center" aria-hidden="true">＋</span>
        <span class="flex-1">New file</span>
        <span class="text-[11px] text-[#241430]/60 border border-[#24143025] rounded px-1.5 py-0.5">⌘N</span>
      </li>
      <li class="flex items-center gap-2.5 px-2.5 py-2.5 rounded-lg" data-cmd="share" role="option" aria-selected="false">
        <span class="w-[18px] text-center" aria-hidden="true">↗</span>
        <span class="flex-1">Share document</span>
        <span class="text-[11px] text-[#241430]/60 border border-[#24143025] rounded px-1.5 py-0.5">⌘S</span>
      </li>
      <li class="flex items-center gap-2.5 px-2.5 py-2.5 rounded-lg" data-cmd="settings" role="option" aria-selected="false">
        <span class="w-[18px] text-center" aria-hidden="true">⚙</span>
        <span class="flex-1">Settings</span>
        <span class="text-[11px] text-[#241430]/60 border border-[#24143025] rounded px-1.5 py-0.5">⌘,</span>
      </li>
    </ul>
    <button type="button" class="absolute top-3.5 right-3.5 bg-transparent border-none cursor-pointer p-1 rounded-md" style="color:#BFD9F2;" aria-label="Close command palette">
      <svg viewBox="0 0 20 20" width="14" height="14" aria-hidden="true"><line x1="4" y1="4" x2="16" y2="16" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"></line><line x1="16" y1="4" x2="4" y2="16" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"></line></svg>
    </button>
  </div>
</div>
<style>
.cmdk-tw-list--new-file li[data-cmd="new-file"],
.cmdk-tw-list--share li[data-cmd="share"],
.cmdk-tw-list--settings li[data-cmd="settings"] { background: #BFD9F233; }
</style>

react

export function CommandPalette({
  label = "Quick actions",
  query = "new",
  activeRow = "new-file",
  accent = "#BFD9F2",
  width = 420,
  backdrop = true,
}) {
  const rows = [
    { id: "new-file", icon: "＋", text: "New file", kbd: "⌘N" },
    { id: "share", icon: "↗", text: "Share document", kbd: "⌘S" },
    { id: "settings", icon: "⚙", text: "Settings", kbd: "⌘," },
  ];
  return (
    <div style={{ display: "grid", placeItems: "center", minHeight: 320, borderRadius: 12, padding: 24, boxSizing: "border-box",
      background: backdrop ? "rgba(36,20,48,.45)" : "transparent" }}>
      <div role="dialog" aria-modal="true" aria-labelledby="cmdk-title" style={{ position: "relative", width, boxSizing: "border-box", font: "15px/1.5 system-ui, sans-serif",
        background: "#FAF7F2", color: "#241430", borderRadius: 14, boxShadow: "0 20px 44px rgba(36,20,48,.28)", padding: 18 }}>
        <div id="cmdk-title" style={{ fontSize: 12, fontWeight: 700, letterSpacing: ".04em", textTransform: "uppercase", color: "#241430aa", marginBottom: 10 }}>{label}</div>
        <div style={{ display: "flex", alignItems: "center", gap: 8, border: "1.5px solid #24143025", borderRadius: 8, padding: "9px 12px", marginBottom: 10 }}>
          <svg aria-hidden="true" width="16" height="16" viewBox="0 0 20 20" style={{ color: "#24143080", flexShrink: 0 }}>
            <circle cx="8.5" cy="8.5" r="6" fill="none" stroke="currentColor" strokeWidth="1.6" />
            <line x1="13.2" y1="13.2" x2="18" y2="18" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
          </svg>
          <input type="text" value={query} aria-label={label} readOnly style={{ border: "none", outline: "none", background: "none", font: "inherit", color: "inherit", width: "100%" }} />
        </div>
        <ul role="listbox" aria-label="Matching commands" style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 2 }}>
          {rows.map((row) => (
            <li key={row.id} role="option" aria-selected={row.id === activeRow} style={{ display: "flex", alignItems: "center", gap: 10, padding: "9px 10px", borderRadius: 8,
              background: row.id === activeRow ? "#BFD9F233" : "transparent" }}>
              <span aria-hidden="true" style={{ width: 18, textAlign: "center" }}>{row.icon}</span>
              <span style={{ flex: 1 }}>{row.text}</span>
              <span style={{ fontSize: 11, color: "#24143099", border: "1px solid #24143025", borderRadius: 4, padding: "1px 5px" }}>{row.kbd}</span>
            </li>
          ))}
        </ul>
        <button type="button" aria-label="Close command palette" style={{ position: "absolute", top: 14, right: 14, background: "none", border: "none", cursor: "pointer", padding: 4, borderRadius: 6, color: accent }}>
          <svg viewBox="0 0 20 20" width="14" height="14" aria-hidden="true">
            <line x1="4" y1="4" x2="16" y2="16" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
            <line x1="16" y1="4" x2="4" y2="16" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
          </svg>
        </button>
      </div>
    </div>
  );
}