fumadocs-mdx-structure

MDX documentation files require standardized frontmatter with a title and description at the top, followed by imports for ComponentName, CopyCommandButton, InstallationCommands, and ComponentPreview. This enforces consistency across all component documentation pages in your Fumadocs content/docs/ directory.

Store component MDX files in content/docs/components/ with the naming convention component-name.mdx. Each file must include frontmatter, a copy button after frontmatter, standard import statements, Installation and Usage sections, and ComponentPreview blocks wrapping all examples.

Import CopyCommandButton and ComponentPreview at the top of your MDX file. Place the CopyCommandButton immediately after frontmatter for quick access, then wrap all component examples with ComponentPreview blocks to maintain consistent presentation across your documentation.

This skill is optimized for component documentation following the 8-bit component pattern. While the frontmatter and import structure can apply broadly, the ComponentPreview and CopyCommandButton patterns are designed specifically for documenting reusable components with installation and usage guidance.

Required imports are ComponentName, CopyCommandButton, InstallationCommands, and ComponentPreview. These provide the standard tooling for copy functionality, installation guidance, and interactive component examples in your MDX documentation.

Standardized frontmatter, imports, and section layout ensure consistency, improve navigation, and make documentation maintainable. This pattern helps readers quickly locate installation steps, usage examples, and copy commands across all component pages in your Fumadocs site.