UIのカスタマイズ

適切なコンポーネントを選ぶアンカーリンクをコピー

レイアウト UI には、組み込みのレイアウトコンポーネントがいくつか用意されています。用途に合わせて試してみてください。

Propsアンカーリンクをコピー

まずは、コンポーネントのオプションで要件を満たせるかどうかを確認してください。例えば、次のようなものがあります。

<DocsLayout sidebar={{ enabled: false }}>{/* コンテンツ */}</DocsLayout>

または、props でコンテナのスタイルを指定することもできます。

<DocsLayout
  containerProps={{
    className: '...',
  }}
>
  {/* コンテンツ */}
</DocsLayout>

各コンポーネントの詳細なドキュメントは Fumadocs UI セクションにあるので、リファレンスとしてご活用ください。

ほとんどのオプションは JSX 要素を受け取れるため、独自のコンポーネントを組み込めます。 目次の下やサイドバーにセクションを追加するなど、たいていのユースケースはこの方法で十分に対応できます。

CSSアンカーリンクをコピー

より複雑なスタイリングに対応できるよう、Fumadocs UI の一部のコンポーネントには、要素を選択するための独自の id & data- 属性が付与されています。 CSS セレクターでこれらを指定できます。

#nd-docs-layout #nd-subnav {
  background-color: purple;
}

[data-toc-popover] {
  background-color: purple;
}

影響範囲の広い強引なスタイルや、特定の DOM 構造を強く前提とするスタイルは避けてください。特に新しい UI 機能が追加された際に、後方互換性を保証するのが難しくなるためです。

/* このような要素の指定方法は避けてください！ */
[data-toc-popover] > div {
  background-color: purple;
}

CSS によるアプローチにはリスクが伴います。独自のライフサイクルでバージョン管理されるのは id & data- 属性のみであるため、可能であれば他のアプローチを選択してください。

CLI でインストールするアンカーリンクをコピー

公開されているオプションでは対応できない高度な要件がある場合や、カスタム CSS が既存のスタイルに過度に干渉するようになってしまった場合には、Fumadocs CLI が強力なツールになります。

インストール可能なコンポーネントについては、関連するドキュメントに次のような案内が掲載されています。

npx @fumadocs/cli@latest add layouts/docs

レイアウトコンポーネント(多くの場合、複数のコンポーネントで構成されています)向けには、細かく選択しながらカスタマイズできる専用の customize コマンドが Fumadocs CLI に用意されています。

npx @fumadocs/cli@latest customize

レイアウトコンポーネント全体をインストールする代わりに、スロット (レイアウトコンポーネントの置き換え可能な部分) だけをインストールすることもできます。 上記のコマンドを実行すると、すべてのオプションを確認できます。

インストール後は、Fumadocs UI からエクスポートされた型ではなく、インストールした型を使用してください。たとえば、layout/docs をインストールした場合は、インポートを次のように更新します。

import type { DocsLayoutProps } from 'fumadocs-ui/layouts/docs';
import type { DocsLayoutProps } from '@/components/layout/docs';

これにより、ローカルのコンポーネントは Fumadocs UI から切り離されます。

Fumadocs CLI を使うと UI コードを完全に制御できますが、次の点に注意してください。

• インストールしたコンポーネントには、UI のアップデートが反映されなくなります。
• Fumadocs CLI でコンポーネントを再インストールすることはできますが、それまでのカスタマイズは失われます(上書きするファイルは選択できます)。
• Fumadocs CLI は、最新の Fumadocs Core + UI を使用していることを前提としています。