fumadocs-mdx-structure

---

```

Usage Section

```mdx

---

```tsx

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

```

```tsx

Example

```

```

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";

Button

---

---

```tsx

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

```

```tsx

Button

```

```

Key Principles

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

File Location

Place documentation files in:

• content/docs/components/component-name.mdx for components
• content/docs/blocks/category/block-name.mdx for blocks