fumadocs-mdx-structure — theorcdev/8bitcn-ui…

Documento original do Skill

Renderizado do repositório de origem, preservando títulos, exemplos, código, tabelas, links e imagens.

Fumadocs MDX Structure

Create well-structured MDX documentation files for 8-bit components following the established patterns.

Frontmatter Pattern

mdx

---
title: Component Name
description: Brief description of the 8-bit component.
---

Import Pattern

All documentation files require these imports:

mdx

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:

mdx

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

mdx

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

Installation Section

mdx

## Installation

---

<InstallationCommands packageName="component-name" />

Usage Section

mdx

## Usage

---

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

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

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";

<div className="flex flex-col md:flex-row items-center justify-end gap-2 mb-2">
  <CopyCommandButton
    copyCommand="pnpm dlx shadcn@latest add @8bitcn/button"
    command="pnpm dlx shadcn@latest add @8bitcn/button"
  />
</div>

<ComponentPreview title="8-bit button component" name="button">
  <Button>Button</Button>
</ComponentPreview>

## Installation

---

<InstallationCommands packageName="button" />

## Usage

---

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

<Button variant="outline">Button</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