2025/02/15

Search

Implement document search in your docs

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.

Configurations

You can customize search UI from the Root Provider component in root layout.

When not specified, it uses the Default

fetch

Search Client powered by Orama.

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'],
    ],
  }}
>
  {children}
</RootProvider>;

Disable Search

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


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

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

Hot Keys

Customise the hot keys to trigger search dialog.


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

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

Tag Filter

Add UI to change filters. Make sure to configure Tag Filter on search server first.


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

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

Search Options

Pass options to the search client, like changing the API endpoint for Orama search server:


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

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

Replace Search Dialog

You can replace the default Search Dialog with:


'use client';
import SearchDialog from 'fumadocs-ui/components/dialog/search-default';
import type { SharedProps } from 'fumadocs-ui/components/dialog/search';

export default function CustomDialog(props: SharedProps) {
  // your own logic here
  return <SearchDialog {...props} />;
}

To pass it to the Root Provider, you need a wrapper with

use client

directive.


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

const SearchDialog = dynamic(() => import('@/components/search')); // lazy load

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

Use it instead of your previous Root Provider


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>
  );
}

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

All Posts

Author

MkSaaS

Search

Implement document search in your docs

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.

Configurations

You can customize search UI from the Root Provider component in root layout.

When not specified, it uses the Default

fetch

Search Client powered by Orama.

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'],
    ],
  }}
>
  {children}
</RootProvider>;

Disable Search

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


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

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

Hot Keys

Customise the hot keys to trigger search dialog.


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

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

Tag Filter

Add UI to change filters. Make sure to configure Tag Filter on search server first.


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

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

Search Options

Pass options to the search client, like changing the API endpoint for Orama search server:


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

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

Replace Search Dialog

You can replace the default Search Dialog with:


'use client';
import SearchDialog from 'fumadocs-ui/components/dialog/search-default';
import type { SharedProps } from 'fumadocs-ui/components/dialog/search';

export default function CustomDialog(props: SharedProps) {
  // your own logic here
  return <SearchDialog {...props} />;
}

To pass it to the Root Provider, you need a wrapper with

use client

directive.


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

const SearchDialog = dynamic(() => import('@/components/search')); // lazy load

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

Use it instead of your previous Root Provider


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>
  );
}

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

All Posts

Author

MkSaaS

Search

Search UI

Configurations

Custom Links

Disable Search

Hot Keys

Tag Filter

Search Options

Replace Search Dialog

Other Solutions

Algolia

Tag Filter

Orama Cloud

Community Integrations

Built-in UI

Author

Categories

More Posts

Premium Blog Post

Themes

Manual Installation

Search

Search UI

Configurations

Custom Links

Disable Search

Hot Keys

Tag Filter

Search Options

Replace Search Dialog

Other Solutions

Algolia

Tag Filter

Orama Cloud

Community Integrations

Built-in UI

Author

Categories

More Posts

Premium Blog Post

Themes

Manual Installation