Search

Fumadocs UI provides a good-looking search dialog out-of-the-box.

Open with K ⌘ or K Ctrl.

Search Dialog

You can customize the search dialog from Root Provider.

'use client';
 
import { RootProvider } from 'fumadocs-ui/provider';
import dynamic from 'next/dynamic';
 
const SearchDialog = dynamic(() => import('@/components/search'));
 
export function Provider({ children }: { children: React.ReactNode }) {
  return (
    <RootProvider
      search={{
        SearchDialog,
      }}
    >
      {children}
    </RootProvider>
  );
}

The default dialog will be lazy loaded using next/dynamic. This allows a better initial loading performance.

When not specified, it uses the Default Search Client powered by Flexsearch.

Custom Links

Add custom link items to search dialog. They are shown as fallbacks when the query is empty.

import { RootProvider } from 'fumadocs-ui/root-provider';
 
<RootProvider
  search={{
    links: [
      ['Home', '/'],
      ['Docs', '/docs'],
    ],
  }}
>
  ...
</RootProvider>;

Disable Search

To opt-out of document search, disable it from root provider.

<RootProvider
  search={{
    enable: false,
  }}
>
  {children}
</RootProvider>

Hot Keys

You can customise the hot keys to trigger search dialog.

<RootProvider
  search={{
    hotkey: [
      {
        display: 'K',
        key: 'k', // key code, or a function determining whether the key is pressed
      },
    ],
  }}
>
  {children}
</RootProvider>

Algolia

For the setup guide, see Integrate Algolia Search. Make sure you have algoliasearch installed on your project.

While generally we recommend building your own search with their client-side SDK, you can also plug the built-in dialog interface.

First, create a separate client component for the dialog.

Client Component

import algo from 'algoliasearch/lite';
import type { SharedProps } from 'fumadocs-ui/components/dialog/search';
import SearchDialog from 'fumadocs-ui/components/dialog/search-algolia';
 
const client = algo(appId, apiKey);
const index = client.initIndex(indexName);
 
export default function CustomSearchDialog(props: SharedProps) {
  return <SearchDialog index={index} {...props} />;
}

Replace appId, apiKey and indexName with your desired values.

Then, lazy load the dialog with next/dynamic.

Provider (Client Component)

import { RootProvider } from 'fumadocs-ui/provider';
import dynamic from 'next/dynamic';
import type { ReactNode } from 'react';
 
const SearchDialog = dynamic(() => import('@/components/search'));
 
export function Provider({ children }: { children: ReactNode }) {
  return (
    <RootProvider
      search={{
        SearchDialog,
      }}
    >
      {children}
    </RootProvider>
  );
}

Finally, wrap your entire application under the new Provider.

Note

The built-in implementation doesn't use instant search (their official javascript client).

Built-in UI

If you want to use the built-in search dialog UI instead of building your own, you may use the SearchDialog component.

import {
  SearchDialog,
  type SharedProps
} from 'fumadocs-ui/components/dialog/search'
 
export default function CustomSearchDialog(props: SharedProps) { ... }

Unstable

It is an internal API, might break during iterations