Integrations

React

@hopfield/react ships a complete Cmd+K search experience: modal dialog, debounced typeahead, grouped results, and streaming AI answers. Headless hooks are there when you want to own the UI.

Install

npm install @hopfield/react

Drop in the default dialog

SiteSearch.tsx

import "@hopfield/react/styles.css";
import { Search } from "@hopfield/react";

export function SiteSearch() {
  return <Search publicApiKey="hp_public_..." />;
}

hotkey defaults to true: visitors open the dialog with Cmd/Ctrl + K.
Pass trigger to open it from your own button or fake input.
Control it yourself with open and onOpenChange.

Custom trigger

HeaderSearch.tsx

import "@hopfield/react/styles.css";
import { Search } from "@hopfield/react";

export function HeaderSearch() {
  return (
    <Search
      publicApiKey="hp_public_..."
      trigger={
        <button type="button" className="site-search-trigger">
          Search docs <kbd>⌘K</kbd>
        </button>
      }
    />
  );
}

Theming

The widget adapts to your brand via the theme prop and CSS class overrides (classNames). Colors, radius, and fonts are all adjustable without forking the component.

<Search
  publicApiKey="hp_public_..."
  theme={{
    accentColor: "#0e9f6e",
    background: "#ffffff",
    textColor: "#0f1a2a",
  }}
/>

Headless: build your own UI

Use SearchProvider with SearchInput and SearchResults, or go fully custom with useSearchController():

CustomSearch.tsx

import {
  SearchProvider,
  SearchInput,
  SearchResults,
  useSearchContext,
} from "@hopfield/react";

export function CustomSearch() {
  return (
    <SearchProvider publicApiKey="hp_public_...">
      <SearchInput placeholder="Search…" />
      <SearchResults />
    </SearchProvider>
  );
}

Using the App Router? See the Next.js guide. Prefer raw HTTP? See the REST API.