Component Documentation Pattern
Create comprehensive documentation for 8-bit components following the standard structure.
Component Preview Structure
Wrap component examples in ComponentPreview with realistic data:
Description of first variant
Description of second variant
Simple Component Example
For basic components like Button:
Complex Component Example
For components with multiple sub-components like Sheet:
Usage Section Pattern
Single import (simple components):
```tsx import { Button } from "@/components/ui/8bit/button"
Multiple imports (complex components):
mdxtsx
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:
Default health bar
Retro health bar
Copy Command Button
Place before ComponentPreview:
Key Principles Preview first - Show component before explaining Multiple variants - Demonstrate different prop combinations Realistic data - Use meaningful values in examples Import completeness - Include all used imports Code block labels - Use ```tsx for TypeScript 8-bit components - Import from @/components/ui/8bit/ 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