Search

Fumadocs UI provides a good-looking search UI for your docs, the search functionality is instead provided and documented on Fumadocs Core.

See Document Search.

Search UI

Open with ⌘ K or Ctrl K.

Disable Search

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

app/layout.tsx

import { RootProvider } from 'fumadocs-ui/provider';
import type { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <html>
      <body>
        <RootProvider
          search={{
            enabled: false,
          }}
        >
          {children}
        </RootProvider>
      </body>
    </html>
  );
}

Hot Keys

Customise the hot keys to trigger search dialog.

import { RootProvider } from 'fumadocs-ui/provider';

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

Replace Search Dialog

Make a <RootProvider /> wrapper with use client directive.

provider.tsx

'use client';
import { RootProvider } from 'fumadocs-ui/provider';
import type { ReactNode } from 'react';

// for example, using the default `fetch()` client
import SearchDialog from 'fumadocs-ui/components/dialog/search-default';

export function Provider({ children }: { children: ReactNode }) {
  return (
    <RootProvider
      search={{
        SearchDialog,
      }}
    >
      {children}
    </RootProvider>
  );
}

Use it instead of your previous Root Provider

app/layout.tsx

import { Provider } from './provider';
import type { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Provider>{children}</Provider>
      </body>
    </html>
  );
}

Search Client

When not specified, it uses the fetch search client powered by Orama.

`fetch`

Handle search with an API endpoint, the search engine is Orama by default, but you may use other engine as well.

You can pass options to the search client:

import { RootProvider } from 'fumadocs-ui/provider';

<RootProvider
  search={{
    options: {
      // customise the API endpoint
      api: '/api/search/docs',
    },
  }}
>
  {children}
</RootProvider>;

Tag Filter

Add UI for filtering results by tags, configure Tag Filter on search server and add the following:

import { RootProvider } from 'fumadocs-ui/provider';

<RootProvider
  search={{
    options: {
      defaultTag: 'value',
      tags: [
        {
          name: 'Tag Name',
          value: 'value',
        },
      ],
    },
  }}
>
  {children}
</RootProvider>;

Algolia

For the setup guide, see Integrate Algolia Search.

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

components/search.tsx

'use client';

import algo from 'algoliasearch/lite';
import type { SharedProps } from 'fumadocs-ui/components/dialog/search';
import SearchDialog from 'fumadocs-ui/components/dialog/search-algolia';

const appId = process.env.NEXT_PUBLIC_ALGOLIA_APP_ID;
const apiKey = process.env.NEXT_PUBLIC_ALGOLIA_API_KEY;
const indexName = process.env.NEXT_PUBLIC_ALGOLIA_INDEX;

if (!appId || !apiKey || !indexName) throw new Error('Algolia credentials');

const client = algo(appId, apiKey);

const index = client.initIndex(indexName);

export default function CustomSearchDialog(props: SharedProps) {
  return <SearchDialog index={index} {...props} showAlgolia />;
}

Replace appId, apiKey and indexName with your desired values.
Replace the default search dialog with your new component.

Note

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

Tag Filter

Same as default search client, you can configure Tag Filter on the dialog.

components/search.tsx

import SearchDialog from 'fumadocs-ui/components/dialog/search-algolia';

<SearchDialog
  defaultTag="value"
  tags={[
    {
      name: 'Tag Name',
      value: 'value',
    },
  ]}
/>;

Orama Cloud

For the setup guide, see Integrate Orama Cloud.

components/search.tsx

'use client';

import { OramaClient } from '@oramacloud/client';
import type { SharedProps } from 'fumadocs-ui/components/dialog/search';
import SearchDialog from 'fumadocs-ui/components/dialog/search-orama';

const client = new OramaClient({
  endpoint: 'endpoint',
  api_key: 'apiKey',
});

export default function CustomSearchDialog(props: SharedProps) {
  return <SearchDialog {...props} client={client} showOrama />;
}

Replace endpoint, apiKey with your desired values.
Replace the default search dialog with your new component.

Community Integrations

A list of integrations maintained by community.

Trieve Search

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) {
  return <SearchDialog {...props} />;
}

Unstable

It is an internal API, might break during iterations

On this page