SearchBar

Header search with debounced autocomplete, click-outside-to-close, escape to dismiss.

components/search-bar.tsxPeer deps: lucide-react

Live preview

Try typing “tee”, “merino”, or anything else.

Usage

import { SearchBar } from "@/components/search-bar";

<SearchBar
  onSearch={async (q) => {
    const res = await fetch(`/api/search?q=${q}`);
    const data = await res.json();
    return data.results;
  }}
/>