║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Search description: "The default opinionated search experience built."

import { File, Folder, Files } from 'fumadocs-ui/components/files'; import { Tabs, TabsList, TabsTrigger, TabsContent, TabsContents } from '@/components/animate-ui/components/animate/tabs'; import { LogosShadcn } from '@/components/icons/shadcn'; import { LogosJavascript } from '@/components/icons/javascript'; import { TypeTable } from 'fumadocs-ui/components/type-table';

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

<PreviewSearchNoAskAI /> <Tabs> <div className="flex items-center justify-between gap-2 mt-20 mb-2"> <h2 className="!my-0 mr-4">Usage</h2> <TabsList className="flex items-center gap-2"> <TabsTrigger value="shadcn" className="flex items-center gap-2 px-2"> <LogosShadcn /> <span>shadcn/ui</span></TabsTrigger> <TabsTrigger value="vanilla" className="flex items-center gap-2 px-2"> <LogosJavascript /> <span >Vanilla</span></TabsTrigger> </TabsList> </div> <TabsContents> <TabsContent value="shadcn"> ```tsx 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="06YAZFOHSQ"
  apiKey="94b6afdc316917b6e6cdf2763fa561df"
  indexName="algolia_podcast_sample_dataset"
  attributes={{
    primaryText: "title",
    secondaryText: "description",
    tertiaryText: "itunesAuthor",
    url: "url",
    image: "imageUrl",
  }}
/>

Structure

<Files> <Folder name="app"> <File name="page.tsx" /> </Folder> <Folder name="components" defaultOpen> <File name="search.tsx" /> </Folder> <Folder name="hooks" defaultOpen> <File name="use-keyboard-navigation.tsx" /> </Folder> <File name="package.json" /> </Files> </TabsContent> <TabsContent value="vanilla">

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',
    applicationId: 'YOUR_APP_ID',
    apiKey: 'YOUR_API_KEY',
    indexName: 'YOUR_INDEX_NAME',
    attributes: {
      primaryText: 'title',
      secondaryText: 'description',
      tertiaryText: 'itunesAuthor',
      url: 'url',
      image: 'imageUrl',
    },
  });
</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',
    applicationId: 'YOUR_APP_ID',
    apiKey: 'YOUR_API_KEY',
    indexName: 'YOUR_INDEX_NAME',
    attributes: {
      primaryText: 'title',
      secondaryText: 'description',
      tertiaryText: 'itunesAuthor',
      url: 'url',
      image: 'imageUrl',
    },
  });
</script>

</TabsContent>

</TabsContents> </Tabs>

References

<TypeTable type={{ applicationId: { description: "Algolia Application ID (required)", type: "string", required: true, }, apiKey: { description: "Algolia API Key (required)", type: "string", required: true, }, indexName: { description: "Algolia Index Name (required)", type: "string", required: true, }, attributes: { description: "Map which hit attributes to render (supports dotted paths)", type: "HitsAttributesMapping", parameters: [ { name: "primaryText", description: "The first attribute to render in the search experience (required) - must be a searchable/highlightable attribute", }, { name: "secondaryText", description: "The second attribute to render in the search experience (optional)", }, { name: "tertiaryText", description: "The third attribute to render in the search experience (optional)", }, { name: "url", description: "The URL to render in the search experience (optional)", }, { name: "image", description: "The image to render in the search experience (optional)", }, ], required: true, }, baseAskaiUrl: { description: "Base URL for AI chat API (optional, defaults to beta endpoint)", type: "string", default: ""https://askai.algolia.com"", required: false, }, placeholder: { description: "Placeholder text for search input (optional, defaults to "What are you looking for?")", type: "string", default: ""What are you looking for?"", required: false, }, hitsPerPage: { description: "Number of hits per page (optional, defaults to 8)", type: "number", default: 8, required: false, }, keyboardShortcut: { description: "Keyboard shortcut to open search (optional, defaults to "cmd+k")", type: "string", default: ""cmd+k"", required: false, }, buttonText: { description: "Custom search button text (optional)", type: "string", required: false, }, buttonProps: { description: "Custom search button props (optional)", type: "ComponentProps<typeof SearchButton>", parameters: [ { name: "onClick", description: "The function to call when the button is clicked", }, { name: "children", description: "The children to render in the button (optional)", }, ], required: false, }, darkMode: { description: "Enable dark mode (optional)", type: "boolean", required: false, }, insights: { description: "Enable Algolia Insights (optional, defaults to true)", type: "boolean", default: true, required: false, }, searchParameters: { description: "Additional Algolia search parameters: https://www.algolia.com/doc/api-reference/search-api-parameters", type: <span>See Algolia Search API Parameters</span>, typeDescriptionLink: "https://www.algolia.com/doc/api-reference/search-api-parameters", required: false, }, }} />

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.

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║