主題 | Formion — 企業組織與營運的結構化引擎

使用方法

注意只支持 Tailwind CSS v4：

Tailwind CSS

@import 'tailwindcss';
@import 'fumadocs-ui/css/neutral.css';
@import 'fumadocs-ui/css/preset.css';

/* path of `fumadocs-ui` relative to the CSS file */
@source '../node_modules/fumadocs-ui/dist/**/*.js';

預設更改

通過使用 Tailwind CSS 插件或預構建的樣式表，您的預設邊框、文本和背景顏色將被更改。

明/暗模式

Fumadocs 通過 next-themes 支持明/暗模式，它包含在 Root Provider 中。

參見 Root Provider 瞭解更多資訊。

RTL 佈局

支持 RTL（從右到左）佈局。

要啟用 RTL，請在 body 和 root provider（Radix UI 需要）中將 dir 屬性設置為 rtl。

import { RootProvider } from 'fumadocs-ui/provider';
import type { ReactNode } from 'react';

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body dir="rtl">
        <RootProvider dir="rtl">{children}</RootProvider>
      </body>
    </html>
  );
}

前綴

Fumadocs UI 有自己的顏色、動畫和工具。預設情況下，它添加了 fd- 前綴，以避免與 Shadcn UI 或您自己的 CSS 變量衝突。

您可以通過添加一些別名來使用它們，而無需前綴：

Tailwind CSS

@theme {
  --color-primary: var(--color-fd-primary);
}

您可以將其與 CSS 媒體查詢一起使用，實現響應式設計。

佈局寬度

使用 CSS 變量自定義文檔佈局的最大寬度。

:root {
  --fd-layout-width: 1400px;
}

Tailwind CSS 預設

Tailwind CSS 預設引入了新的顏色和額外的工具，包括 fd-steps。

主題

它開箱即用地提供了許多主題，您可以選擇一個您喜歡的。

@import 'fumadocs-ui/css/<theme>.css';

/* Example */
@import 'fumadocs-ui/css/black.css';

Neutral

Black

Vitepress

Dusk

Catppuccin

Ocean

Purple

顏色

設計系統的靈感來自 Shadcn UI，您可以使用 CSS 變量輕鬆自定義顏色。

global.css

:root {
  --color-fd-background: hsl(0, 0%, 100%);
}

.dark {
  --color-fd-background: hsl(0, 0%, 0%);
}

排版

我們有一個內置插件，它是從 Tailwind CSS Typography 派生而來的。

該插件添加了一個 prose 類和變體來自定義它。

<div className="prose">
  <h1>Good Heading</h1>
</div>

該插件僅與 Fumadocs UI 的 MDX 組件一起工作，它可能與 @tailwindcss/typography 衝突。如果您需要使用 @tailwindcss/typography 而不是預設插件，請設置類名選項以避免衝突。

使用方法

注意只支持 Tailwind CSS v4：

Tailwind CSS

@import 'tailwindcss';
@import 'fumadocs-ui/css/neutral.css';
@import 'fumadocs-ui/css/preset.css';

/* path of `fumadocs-ui` relative to the CSS file */
@source '../node_modules/fumadocs-ui/dist/**/*.js';

預設更改

通過使用 Tailwind CSS 插件或預構建的樣式表，您的預設邊框、文本和背景顏色將被更改。

明/暗模式

Fumadocs 通過 next-themes 支持明/暗模式，它包含在 Root Provider 中。

參見 Root Provider 瞭解更多資訊。

RTL 佈局

支持 RTL（從右到左）佈局。

要啟用 RTL，請在 body 和 root provider（Radix UI 需要）中將 dir 屬性設置為 rtl。

import { RootProvider } from 'fumadocs-ui/provider';
import type { ReactNode } from 'react';

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body dir="rtl">
        <RootProvider dir="rtl">{children}</RootProvider>
      </body>
    </html>
  );
}

前綴

Fumadocs UI 有自己的顏色、動畫和工具。預設情況下，它添加了 fd- 前綴，以避免與 Shadcn UI 或您自己的 CSS 變量衝突。

您可以通過添加一些別名來使用它們，而無需前綴：

Tailwind CSS

@theme {
  --color-primary: var(--color-fd-primary);
}

您可以將其與 CSS 媒體查詢一起使用，實現響應式設計。

佈局寬度

使用 CSS 變量自定義文檔佈局的最大寬度。

:root {
  --fd-layout-width: 1400px;
}

Tailwind CSS 預設

Tailwind CSS 預設引入了新的顏色和額外的工具，包括 fd-steps。

主題

它開箱即用地提供了許多主題，您可以選擇一個您喜歡的。

@import 'fumadocs-ui/css/<theme>.css';

/* Example */
@import 'fumadocs-ui/css/black.css';

Neutral

Black

Vitepress

Dusk

Catppuccin

Ocean

Purple

顏色

設計系統的靈感來自 Shadcn UI，您可以使用 CSS 變量輕鬆自定義顏色。

global.css

:root {
  --color-fd-background: hsl(0, 0%, 100%);
}

.dark {
  --color-fd-background: hsl(0, 0%, 0%);
}

排版

我們有一個內置插件，它是從 Tailwind CSS Typography 派生而來的。

該插件添加了一個 prose 類和變體來自定義它。

<div className="prose">
  <h1>Good Heading</h1>
</div>

主題

使用方法

預設更改

明/暗模式

RTL 佈局

前綴

佈局寬度

Tailwind CSS 預設

主題

顏色

排版

作者

分類

更多文章

Markdown

快速入門

對比

加入我們的社區

主題

使用方法

預設更改

明/暗模式

RTL 佈局

前綴

佈局寬度

Tailwind CSS 預設

主題

顏色

排版

作者

分類

更多文章

Markdown

快速入門

對比

加入我們的社區