fumadocs-mdx-structure

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Fumadocs MDX Structure

Fumadocs MDX 文档结构

Create well-structured MDX documentation files for 8-bit components following the established patterns.

按照既定规范为8-bit组件创建结构清晰的MDX文档文件。

Frontmatter Pattern

前置元数据（Frontmatter）规范

mdx

---
title: Component Name
description: Brief description of the 8-bit component.
---

mdx

---
title: 组件名称
description: 8-bit组件的简要说明。
---

Import Pattern

导入规范

All documentation files require these imports:

mdx

import { ComponentName } from "@/components/ui/8bit/component-name";
import CopyCommandButton from "@/components/copy-command-button";
import InstallationCommands from "@/components/installation-commands";
import ComponentPreview from "@/components/component-preview";

所有文档文件都需要包含以下导入语句：

mdx

import { ComponentName } from "@/components/ui/8bit/component-name";
import CopyCommandButton from "@/components/copy-command-button";
import InstallationCommands from "@/components/installation-commands";
import ComponentPreview from "@/components/component-preview";

Copy Command Button

复制命令按钮

Place immediately after frontmatter:

mdx

<div className="flex flex-col md:flex-row items-center justify-end gap-2 mb-2">
  <CopyCommandButton
    copyCommand="pnpm dlx shadcn@latest add @8bitcn/component-name"
    command="pnpm dlx shadcn@latest add @8bitcn/component-name"
  />
</div>

将其放置在前置元数据之后：

mdx

<div className="flex flex-col md:flex-row items-center justify-end gap-2 mb-2">
  <CopyCommandButton
    copyCommand="pnpm dlx shadcn@latest add @8bitcn/component-name"
    command="pnpm dlx shadcn@latest add @8bitcn/component-name"
  />
</div>

Component Preview

组件预览

Wrap component examples:

mdx

<ComponentPreview title="8-bit ComponentName component" name="component-name">
  <ComponentName>Example</ComponentName>
</ComponentPreview>

用以下方式包裹组件示例：

mdx

<ComponentPreview title="8-bit ComponentName component" name="component-name">
  <ComponentName>Example</ComponentName>
</ComponentPreview>

Installation Section

安装章节

mdx

undefined

mdx

undefined

Installation

安装

<InstallationCommands packageName="component-name" /> ```

Usage Section

使用章节

mdx

undefined

mdx

undefined

Usage

使用

tsx

import { ComponentName } from "@/components/ui/8bit/component-name"

tsx

<ComponentName variant="outline">Example</ComponentName>

undefined

tsx

import { ComponentName } from "@/components/ui/8bit/component-name"

tsx

<ComponentName variant="outline">Example</ComponentName>

undefined

Complete Example

完整示例

mdx

---
title: Button
description: Displays an 8-bit button component.
---

import { Button } from "@/components/ui/8bit/button";
import CopyCommandButton from "@/components/copy-command-button";
import InstallationCommands from "@/components/installation-commands";
import ComponentPreview from "@/components/component-preview";

<div className="flex flex-col md:flex-row items-center justify-end gap-2 mb-2">
  <CopyCommandButton
    copyCommand="pnpm dlx shadcn@latest add @8bitcn/button"
    command="pnpm dlx shadcn@latest add @8bitcn/button"
  />
</div>

<ComponentPreview title="8-bit button component" name="button">
  <Button>Button</Button>
</ComponentPreview>

mdx

---
title: Button
description: 展示一个8-bit按钮组件。
---

import { Button } from "@/components/ui/8bit/button";
import CopyCommandButton from "@/components/copy-command-button";
import InstallationCommands from "@/components/installation-commands";
import ComponentPreview from "@/components/component-preview";

<div className="flex flex-col md:flex-row items-center justify-end gap-2 mb-2">
  <CopyCommandButton
    copyCommand="pnpm dlx shadcn@latest add @8bitcn/button"
    command="pnpm dlx shadcn@latest add @8bitcn/button"
  />
</div>

<ComponentPreview title="8-bit button component" name="button">
  <Button>Button</Button>
</ComponentPreview>

Installation

安装

Usage

使用

tsx

import { Button } from "@/components/ui/8bit/button"

tsx

<Button variant="outline">Button</Button>

undefined

tsx

import { Button } from "@/components/ui/8bit/button"

tsx

<Button variant="outline">Button</Button>

undefined

Key Principles

核心原则

Frontmatter required - title and description are mandatory
Import order - Component → utilities → UI components
Copy button - Place before ComponentPreview
ComponentPreview - Use for all component examples
Code blocks - Use ```tsx for TypeScript examples
Section separators - Use
```
---
```
after headings
8-bit imports - Use
```
@/components/ui/8bit/
```
path

必须包含前置元数据 - title和description为必填项
导入顺序 - 组件 → 工具类 → UI组件
复制按钮 - 放置在ComponentPreview之前
ComponentPreview - 所有组件示例都需使用该组件包裹
代码块 - TypeScript示例使用```tsx格式
章节分隔符 - 标题后使用
```
---
```
分隔
8-bit组件导入路径 - 使用
```
@/components/ui/8bit/
```
路径

File Location

文件存放位置

Place documentation files in:

content/docs/components/component-name.mdx

for components

content/docs/blocks/category/block-name.mdx

for blocks

将文档文件放置在以下目录：

组件文档：

content/docs/components/component-name.mdx

区块文档：

content/docs/blocks/category/block-name.mdx