X (Twitter)

Fumadocs UI はドキュメントに見栄えの良い検索 UI を提供します。検索機能は代わりに Fumadocs Core で提供され、文書化されます。

ドキュメント検索]を参照してください。

検索 UI

⌘ K または Ctrl K で開きます。

構成

ルートレイアウトのルートプロバイダーコンポーネント] から検索 UI をカスタマイズできます。

指定しない場合、デフォルトの fetch Search Client powered by Orama.] が使用されます。

カスタムリンク

検索ダイアログにカスタムリンク項目を追加します。クエリが空の場合、それらはフォールバックとして表示されます。

app/layout.tsx

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

<RootProvider
  search={{
    links: [
      ['Home', '/'],
      ['Docs', '/docs'],
    ],
  }}
>
  {children}
</RootProvider>;

検索を無効にする

ドキュメント検索をオプトアウトするには、ルートプロバイダーからドキュメント検索を無効にします。

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

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

ホットキー

検索ダイアログをトリガーするホットキーをカスタマイズします。

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

タグフィルター

フィルターを変更するための UI を追加します。最初に検索サーバーで Tag Filter] を必ず設定してください。

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

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

検索オプション

Orama 検索サーバーの API エンドポイントの変更などのオプションを検索クライアントに渡します。

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

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

検索ダイアログの置換

デフォルトの検索ダイアログを次のものに置き換えることができます。

components/search.tsx

'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} />;
}

これをルートプロバイダーに渡すには、use client ディレクティブを含むラッパーが必要です。

provider.tsx

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

以前のルートプロバイダーの代わりに使用してください

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

その他のソリューション

アルゴリア

セットアップガイドについては、「Algolia Search](/docs/headless/search/algolia) の統合」を参照してください。

一般的には、クライアント側で独自の検索を構築することをお勧めします。 SDK では、組み込みのダイアログインターフェイスをプラグインすることもできます。

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 client = algo('appId', 'apiKey');
const index = client.initIndex('indexName');

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

appId、apiKey、および indexName を希望の値に置き換えます。
デフォルトの検索ダイアログを新しいコンポーネントに置き換えます。

Note

組み込み実装はインスタント検索を使用しません (公式 JavaScript クライアント)。

タグフィルター

デフォルトの検索クライアントと同様に、ダイアログでタグフィルター]を設定できます。

components/search.tsx

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

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

オラマクラウド

セットアップガイドについては、「Orama Cloud](/docs/headless/search/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 />;
}

endpoint、apiKey を希望の値に置き換えます。
デフォルトの検索ダイアログを新しいコンポーネントに置き換えます。

コミュニティ統合

コミュニティによって維持されている統合のリスト。

トライブ検索

内蔵UI

独自の検索ダイアログ UI を構築する代わりに、組み込みの検索ダイアログ UI を使用する場合は、 SearchDialog コンポーネントを使用できます。

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

Fumadocs UI はドキュメントに見栄えの良い検索 UI を提供します。検索機能は代わりに Fumadocs Core で提供され、文書化されます。

ドキュメント検索]を参照してください。

検索 UI

⌘ K または Ctrl K で開きます。

構成

ルートレイアウトのルートプロバイダーコンポーネント] から検索 UI をカスタマイズできます。

指定しない場合、デフォルトの fetch Search Client powered by Orama.] が使用されます。

カスタムリンク

検索ダイアログにカスタムリンク項目を追加します。クエリが空の場合、それらはフォールバックとして表示されます。

app/layout.tsx

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

<RootProvider
  search={{
    links: [
      ['Home', '/'],
      ['Docs', '/docs'],
    ],
  }}
>
  {children}
</RootProvider>;

検索を無効にする

ドキュメント検索をオプトアウトするには、ルートプロバイダーからドキュメント検索を無効にします。

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

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

ホットキー

検索ダイアログをトリガーするホットキーをカスタマイズします。

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

タグフィルター

フィルターを変更するための UI を追加します。最初に検索サーバーで Tag Filter] を必ず設定してください。

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

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

検索オプション

Orama 検索サーバーの API エンドポイントの変更などのオプションを検索クライアントに渡します。

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

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

検索ダイアログの置換

デフォルトの検索ダイアログを次のものに置き換えることができます。

components/search.tsx

'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} />;
}

これをルートプロバイダーに渡すには、use client ディレクティブを含むラッパーが必要です。

provider.tsx

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

以前のルートプロバイダーの代わりに使用してください

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

その他のソリューション

アルゴリア

セットアップガイドについては、「Algolia Search](/docs/headless/search/algolia) の統合」を参照してください。

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 client = algo('appId', 'apiKey');
const index = client.initIndex('indexName');

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

appId、apiKey、および indexName を希望の値に置き換えます。
デフォルトの検索ダイアログを新しいコンポーネントに置き換えます。

Note

組み込み実装はインスタント検索を使用しません (公式 JavaScript クライアント)。

タグフィルター

デフォルトの検索クライアントと同様に、ダイアログでタグフィルター]を設定できます。

components/search.tsx

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

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

オラマクラウド

セットアップガイドについては、「Orama Cloud](/docs/headless/search/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 />;
}

endpoint、apiKey を希望の値に置き換えます。
デフォルトの検索ダイアログを新しいコンポーネントに置き換えます。

コミュニティ統合

コミュニティによって維持されている統合のリスト。

トライブ検索

内蔵UI

独自の検索ダイアログ UI を構築する代わりに、組み込みの検索ダイアログ UI を使用する場合は、 SearchDialog コンポーネントを使用できます。

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

検索

検索 UI

構成

カスタムリンク

検索を無効にする

ホットキー

タグフィルター

検索オプション

検索ダイアログの置換

その他のソリューション

アルゴリア

タグフィルター

オラマクラウド

コミュニティ統合

内蔵UI

目次

検索

検索 UI

構成

カスタムリンク

検索を無効にする

ホットキー

タグフィルター

検索オプション

検索ダイアログの置換

その他のソリューション

アルゴリア

タグフィルター

オラマクラウド

コミュニティ統合

内蔵UI

目次