Fumadocs MDX Structure
Create well-structured MDX documentation files for 8-bit components following the established patterns.
Frontmatter Pattern
title: Component Name description: Brief description of the 8-bit component.
Import Pattern
All documentation files require these imports:
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:
Component Preview
Wrap component examples:
Installation Section
Installation
Usage Section
Usage
```tsx import { ComponentName } from "@/components/ui/8bit/component-name"
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";
Installation
Usage
```tsx import { Button } from "@/components/ui/8bit/button"
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
File Location
Place documentation files in:
- content/docs/components/component-name.mdx for components
- content/docs/blocks/category/block-name.mdx for blocks