fumadocs-component-docs

Create comprehensive documentation for 8-bit components following the standard structure.

Component Preview Structure

Wrap component examples in ComponentPreview with realistic data:

```mdx

```

Simple Component Example

For basic components like Button:

```mdx

Button

```

Complex Component Example

For components with multiple sub-components like Sheet:

```mdx

Open

Edit profile

Make changes to your profile here.

Save changes

```

Usage Section Pattern

Single import (simple components):

```mdx

```tsx

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

```

```

Multiple imports (complex components):

```mdx

```tsx

import {

Sheet,

SheetContent,

SheetDescription,

SheetHeader,

SheetTitle,

SheetTrigger,

} from "@/components/ui/8bit/sheet"

```

```

Props Documentation

For components with props tables, use tables:

```mdx

Props

| Prop | Type | Default | Description |

|------|------|---------|-------------|

| variant | string | "default" | Visual style variant |

| size | string | "default" | Size of the button |

| asChild | boolean | false | Whether to merge props onto child |

```

Variant Examples

Show multiple variants in preview:

```mdx

```

Copy Command Button

Place before ComponentPreview:

```mdx

```

Key Principles

1. Preview first - Show component before explaining
2. Multiple variants - Demonstrate different prop combinations
3. Realistic data - Use meaningful values in examples
4. Import completeness - Include all used imports
5. Code block labels - Use ```tsx for TypeScript
6. 8-bit components - Import from @/components/ui/8bit/
7. Consistent spacing - Use gap-4, p-4, mb-2 patterns

Reference Examples

• content/docs/components/button.mdx - Simple component pattern
• content/docs/components/health-bar.mdx - Variant demonstration
• content/docs/components/sheet.mdx - Complex sub-component pattern