# Fumadocs UI (the default theme of Fumadocs): コンポーネント
URL: /ja/docs/ui/components
Source: https://raw.githubusercontent.com/fuma-nama/fumadocs/refs/heads/main/apps/docs/content/docs/ui/components/index.ja.mdx

ドキュメントを充実させるための追加コンポーネント

## 概要 [#overview]

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

- [アコーディオン](/ja/docs/ui/components/accordion): ドキュメントにアコーディオンを追加します
- [自動型テーブル](/ja/docs/ui/components/auto-type-table): 自動生成される型テーブル
- [バナー](/ja/docs/ui/components/banner): サイトにバナーを追加します
- [コードブロック](/ja/docs/ui/components/codeblock): Shiki でハイライトされたコードブロックを表示します
- [コードブロック（動的）](/ja/docs/ui/components/dynamic-codeblock): コードのハイライトも行うコードブロック
- [Files](/ja/docs/ui/components/files): ドキュメント内にファイル構造を表示します
- [GitHub 情報](/ja/docs/ui/components/github-info): GitHub リポジトリの情報を表示します
- [グラフビュー](/ja/docs/ui/components/graph-view): すべてのページをグラフで表示します。
- [ズーム可能な画像](/ja/docs/ui/components/image-zoom): ドキュメント内の画像をズームできるようにします
- [インライン目次](/ja/docs/ui/components/inline-toc): ドキュメントにインライン目次を追加します
- [Steps](/ja/docs/ui/components/steps): ドキュメントにステップを追加する
- [Tabs](/ja/docs/ui/components/tabs): Base UI で構築された Tabs コンポーネントです。値の永続化や共有値などの機能も備えています。
- [型テーブル](/ja/docs/ui/components/type-table): 型の情報をドキュメントに記載するためのテーブル

### MDX コンポーネント [#mdx-components]

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

```ts
import defaultMdxComponents from 'fumadocs-ui/mdx';
```

### 相対リンク [#relative-link]

<Callout type="warn">
サーバーコンポーネントでのみ使用できます。
</Callout>

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

```tsx title="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 と同様にレンダリングを行います。

```astro title="src/pages/docs/[...slug].astro"
<Content components={{ a: createRelativeLink(source, page) }} />
```

```mdx
[My Link](./file.mdx)
```

例: [`../../(integrations)/feedback.mdx`](../../\(integrations\)/feedback.mdx)