Algolia SiteSearch

The Search experience focuses on fast retrieval, instant feedback, and sensible defaults for Algolia-powered catalogs.

Use cases

Product or content search with ranking tuned in Algolia
Keyboard-friendly, accessible navigation

Preview

Open in

Usage

npx shadcn@latest add @algolia/search

This will add the Search experience to your project under components/search. Use it like this:

import Search from "@/components/search";

<Search
  applicationId="betaHAXPMHIMMC"
  apiKey="8b00405cba281a7d800ccec393e9af24"
  indexName="algolia_podcast_sample_dataset"
  attributes={{
    primaryText: "title",
    secondaryText: "description",
    image: "imageUrl",
  }}
/>

Structure

search.tsx

use-keyboard-navigation.tsx

package.json

Use our CDN bundle (recommended)

<link rel="stylesheet" href="https://unpkg.com/@algolia/sitesearch@latest/dist/search.min.css" />
<div id="search-container"></div>
<script src="https://unpkg.com/@algolia/sitesearch@latest/dist/search.min.js"></script>
<script>
  SiteSearch.init({
    container: '#search-container',
    appId: 'YOUR_APP_ID',
    apiKey: 'YOUR_API_KEY',
    indexName: 'YOUR_INDEX_NAME',
    attributes: {
      primaryText: 'title',
    },
  });
</script>

Build your own bundle (advanced)

Open CodeSandbox.
Update the experience in packages/standalone to fit your needs (requires React skills)
Build the bundle bun run bundle
Download the bundle from packages/standalone/dist
Use it in your project

<!-- styles -->
<link rel="stylesheet" href="./path/to/your/search.min.css" />

<!-- scripts -->
<script src="./path/to/your/search.min.js"></script>

<!-- container -->
<div id="search-container"></div>

<!-- initialization -->
<script>
  SiteSearch.init({
    container: '#search-container',
    appId: 'YOUR_APP_ID',
    apiKey: 'YOUR_API_KEY',
    indexName: 'YOUR_INDEX_NAME',
    attributes: {
      primaryText: 'title',
    },
  });
</script>

Extending further

Integrate Algolia Recommend for related product below the hit list.
Change the styling to match your product's design.
Add RefinementList, RangeSlider, ToggleRefinement, and other InstantSearch widgets to make it more powerful.
Add a SearchEmpty slot to highlight help center content or contact actions when no results surface.
Shape it to infinity with full support for react-instantsearch.
Open in v0 for AI edits.

Search