fumadocs-mdx-structure

name	fumadocs-mdx-structure
description	Create MDX documentation files with proper frontmatter, imports, and component integration. Apply when creating or updating Fumadocs documentation pages in content/docs/.

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:

<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:

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

Installation Section

## Installation

---

<InstallationCommands packageName="component-name" />

Usage Section

## Usage

---

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

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