コンポーネント

概要

そのほかに利用できるコンポーネントは以下のとおりです。

MDX コンポーネント

デフォルトの MDX コンポーネントには、Cards、Callouts、Code Blocks、Headings などがあります。

import defaultMdxComponents from 'fumadocs-ui/mdx';

相対リンク

サーバーコンポーネントでのみ使用できます。

href に相対ファイルパスを指定したリンクをサポートするには、デフォルトの a コンポーネントを次のようにオーバーライドします。

app/docs/[[...slug]]/page.tsx

import { createRelativeLink } from 'fumadocs-ui/mdx';
import { source } from '@/lib/source';
import { getMDXComponents } from '@/components/mdx';

const page = source.getPage(['...']);

return (
  <MdxContent
    components={getMDXComponents({
      // `a` タグをオーバーライド
      a: createRelativeLink(source, page),
    })}
  />
);

Astro では、これを <Content /> に渡します。<Content /> は Astro の MDX と同様にレンダリングを行います。

src/pages/docs/[...slug].astro

<Content components={{ a: createRelativeLink(source, page) }} />

[My Link](./file.mdx)

例: ../../(integrations)/feedback.mdx

コンポーネント

概要アンカーリンクをコピー

アコーディオン

自動型テーブル

バナー

コードブロック

コードブロック（動的）

Files

GitHub 情報

グラフビュー

ズーム可能な画像

インライン目次

Steps

Tabs

型テーブル

MDX コンポーネントアンカーリンクをコピー

相対リンクアンカーリンクをコピー

このページの内容

概要

MDX コンポーネント

相対リンク