# Fumadocs UI (the default theme of Fumadocs): 元件
URL: /zh-TW/docs/ui/components
Source: https://raw.githubusercontent.com/fuma-nama/fumadocs/refs/heads/main/apps/docs/content/docs/ui/components/index.zh-TW.mdx

讓文件更完善的額外元件

## 概覽 [#overview]

您還可以使用以下元件：

- [手風琴](/zh-TW/docs/ui/components/accordion): 在您的文件中加入手風琴元件
- [Auto Type Table](/zh-TW/docs/ui/components/auto-type-table): 自動產生的型別表格
- [橫幅](/zh-TW/docs/ui/components/banner): 為您的網站加上橫幅
- [程式碼區塊](/zh-TW/docs/ui/components/codeblock): 顯示經 Shiki 語法突顯的程式碼區塊
- [程式碼區塊（Dynamic）](/zh-TW/docs/ui/components/dynamic-codeblock): 可同時進行語法突顯的程式碼區塊
- [檔案](/zh-TW/docs/ui/components/files): 在您的文件中呈現檔案結構
- [GitHub 資訊](/zh-TW/docs/ui/components/github-info): 顯示您的 GitHub 儲存庫資訊
- [關聯圖檢視](/zh-TW/docs/ui/components/graph-view): 呈現所有頁面的關聯圖。
- [可縮放圖片](/zh-TW/docs/ui/components/image-zoom): 讓文件中的圖片支援點擊放大檢視
- [內嵌目錄](/zh-TW/docs/ui/components/inline-toc): 在您的文件中加入內嵌目錄
- [步驟](/zh-TW/docs/ui/components/steps): 在您的文件中加入步驟
- [頁籤](/zh-TW/docs/ui/components/tabs): 以 Base UI 打造的 Tabs 元件，並提供持久保存、共用值等額外功能。
- [型別表格](/zh-TW/docs/ui/components/type-table): 用於說明型別的表格

### MDX 元件 [#mdx-components]

預設的 MDX 元件包含卡片 (Cards) 、提示框 (Callouts) 、程式碼區塊與標題 (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 />`，它會以與 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)