AI-Powered Search for Modern React Applications
Add AI-powered search to any React app in minutes. useSearch hook, pre-built components, zero-config setup.
Building search in React means choosing between expensive SaaS, complex infrastructure, or months of custom development.
Algolia pricing scales aggressively as your user base grows, and the setup is more complex than most React projects need.
Self-hosted ElasticSearch requires DevOps expertise, dedicated servers, and ongoing maintenance that pulls your team away from product work.
Building relevance, typo tolerance, faceting, and autocomplete from scratch takes months and rarely matches purpose-built search quality.
Drop-in React components with full hooks, TypeScript, and zero-config defaults. Built for any React stack.
Headless hook that gives you full control over search state and UI. Wire it to any component, any design system.
SearchBox, Hits, Facets, Pagination — ready to drop in. Customize or replace any piece with your own components.
Full generic types for your data shape. Autocomplete everywhere — from SearchProvider props to hit objects.
Works out of the box with sensible defaults. Customize when you need to, but never forced to configure.
Works with Vite, Create React App, Next.js, Remix, Astro, or any React setup. One package, everywhere.
<10KB gzipped, tree-shakeable. Only ships the code you actually use. No bloat, no performance hit.
Two approaches — simple components or full control with hooks
// SearchPage.tsx
import { SearchProvider, SearchBox, Hits, Highlight } from '@searchjet/react';
export default function SearchPage() {
return (
<SearchProvider
indexName="your_index"
searchApiKey="your_search_api_key"
>
<SearchBox placeholder="Search anything..." />
<Hits>
{({ hit }) => (
<article className="p-4 border-b">
<h3>
<Highlight attribute="title" hit={hit} />
</h3>
<p>
<Highlight attribute="content" hit={hit} />
</p>
</article>
)}
</Hits>
</SearchProvider>
);
}// SearchWithFilters.tsx
import { useSearch, useHits, useFacets } from '@searchjet/react';
export function SearchWithFilters() {
const { query, setQuery, isSearching } = useSearch();
const { hits } = useHits();
const { facets } = useFacets();
return (
<div className="flex gap-8">
{/* Sidebar filters */}
<aside className="w-64">
{facets.map(facet => (
<FacetGroup key={facet.name} facet={facet} />
))}
</aside>
{/* Results */}
<main className="flex-1">
<input
type="text"
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder="Search products..."
className="w-full p-3 border rounded-lg"
/>
{isSearching ? (
<Spinner />
) : (
hits.map(hit => (
<ProductCard key={hit.objectID} hit={hit} />
))
)}
</main>
</div>
);
}Need a complete starter project?
View GitHub ExamplesEverything you need to know about SearchJet for React
Still have questions?
Contact our support teamJoin developers building exceptional search experiences with SearchJet
Already have an account? Log in
Explore more