Global Search

Searches across the application.

html

<form class="gsearch" role="search" style="--accent:#D9C8F0;">
  <label class="gsearch__label" for="gsearch-input">Search everything</label>
  <div class="gsearch__box" style="border-radius:10px;">
    <svg class="gsearch__icon" width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true"><circle cx="11" cy="11" r="7" stroke="currentColor" stroke-width="2"/><path d="M20 20l-3.5-3.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
    <input id="gsearch-input" class="gsearch__input" type="search" placeholder="Search projects, files, people…">
    <span class="gsearch__hint">⌘K</span>
  </div>
</form>
<style>
.gsearch { display: block; font: 14px system-ui, sans-serif; color: #241430; max-width: 420px; }
.gsearch__label { display: block; margin-bottom: 6px; font-weight: 500; }
.gsearch__box { display: flex; align-items: center; gap: 8px; box-sizing: border-box; padding: 10px 12px; background: #FAF7F2; border: 1.5px solid #24143026; }
.gsearch__box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.gsearch__icon { flex: none; color: #24143080; }
.gsearch__input { flex: 1; min-width: 0; border: none; background: transparent; font: inherit; color: #241430; outline: none; }
.gsearch__input::-webkit-search-cancel-button { display: none; }
.gsearch__hint { flex: none; font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 5px; background: #24143012; color: #24143099; }
</style>

tailwind

<form role="search" class="block font-sans text-sm text-[#241430] max-w-[420px]">
  <label for="gsearch-input-tw" class="block mb-1.5 font-medium">Search everything</label>
  <div class="flex items-center gap-2 box-border px-3 py-2.5 bg-[#FAF7F2] border-[1.5px] border-[#24143026] focus-within:shadow-[0_0_0_3px_var(--tw-accent-ring)]" style="border-radius:10px;--tw-accent-ring:color-mix(in srgb, #D9C8F0 35%, transparent);">
    <svg class="flex-none text-[#24143080]" width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true"><circle cx="11" cy="11" r="7" stroke="currentColor" stroke-width="2"></circle><path d="M20 20l-3.5-3.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path></svg>
    <input id="gsearch-input-tw" type="search" placeholder="Search projects, files, people…" class="flex-1 min-w-0 border-none bg-transparent outline-none [&::-webkit-search-cancel-button]:hidden">
    <span class="flex-none text-[11px] font-semibold px-1.5 py-0.5 rounded-[5px] bg-[#24143012] text-[#24143099]">⌘K</span>
  </div>
</form>

react

export function GlobalSearch({
  label = "Search everything",
  placeholder = "Search projects, files, people…",
  shortcutHint = true,
  accent = "#D9C8F0",
  radius = 10,
}) {
  return (
    <form role="search" style={{ display: "block", fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430", maxWidth: 420 }}>
      <label htmlFor="gsearch-input" style={{ display: "block", marginBottom: 6, fontWeight: 500 }}>{label}</label>
      <div style={{
        display: "flex", alignItems: "center", gap: 8, boxSizing: "border-box", padding: "10px 12px",
        background: "#FAF7F2", border: "1.5px solid #24143026", borderRadius: radius,
      }}>
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true" style={{ flex: "none", color: "#24143080" }}>
          <circle cx="11" cy="11" r="7" stroke="currentColor" strokeWidth="2" />
          <path d="M20 20l-3.5-3.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
        </svg>
        <input id="gsearch-input" type="search" placeholder={placeholder} style={{ flex: 1, minWidth: 0, border: "none", background: "transparent", font: "inherit", color: "#241430", outline: "none" }} />
        {shortcutHint && (
          <span style={{ flex: "none", fontSize: 11, fontWeight: 600, padding: "2px 6px", borderRadius: 5, background: "#24143012", color: "#24143099" }}>⌘K</span>
        )}
      </div>
    </form>
  );
}