Fumadocs Registry Integration

Registry Integration

Register 8-bit components in registry.json for discovery via shadcn add @8bitcn/[component-name].

Component Entry Pattern

{
  "name": "button",
  "type": "registry:component",
  "title": "8-bit Button",
  "description": "A simple 8-bit button component",
  "registryDependencies": ["button"],
  "files": [
    {
      "path": "components/​ui/​8bit/​button.tsx",
      "type": "registry:component",
      "target": "components/​ui/​8bit/​button.tsx"
    },
    {
      "path": "components/​ui/​8bit/​styles/​retro.css",
      "type": "registry:component",
      "target": "components/​ui/​8bit/​styles/​retro.css"
    }
  ]
}

Block Entry Pattern

For pre-built layouts like game UIs:

{
  "name": "quest-log",
  "type": "registry:block",
  "title": "8-bit Quest Log",
  "description": "An 8-bit quest and mission tracking system.",
  "registryDependencies": ["card", "accordion"],
  "categories": ["gaming"],
  "files": [
    {
      "path": "components/​ui/​8bit/​quest-log.tsx",
      "type": "registry:block",
      "target": "components/​ui/​8bit/​quest-log.tsx"
    },
    {
      "path": "components/​ui/​8bit/​styles/​retro.css",
      "type": "registry:component",
      "target": "components/​ui/​8bit/​styles/​retro.css"
    }
  ]
}

Required retro.css

Always include retro.css in files array:

"files": [
  {
    "path": "components/​ui/​8bit/​new-component.tsx",
    "type": "registry:component",
    "target": "components/​ui/​8bit/​new-component.tsx"
  },
  {
    "path": "components/​ui/​8bit/​styles/​retro.css",
    "type": "registry:component",
    "target": "components/​ui/​8bit/​styles/​retro.css"
  }
]

Categories

Use gaming-specific categories for game components:

"categories": ["gaming"]

Available categories: gaming, layout, form, data-display, feedback, navigation, overlay.

Registry Dependencies

List base shadcn dependencies (not 8-bit versions):

"registryDependencies": ["button", "dialog", "progress"]

For blocks with multiple components:

"registryDependencies": ["card", "button", "progress", "tabs"]

Type Selection

registry:component - Single reusable component:

{
  "type": "registry:component",
  "files": [...]
}

registry:block - Pre-built layout or feature:

{
  "type": "registry:block",
  "categories": ["gaming"],
  "files": [...]
}

Complete Example

{
  "name": "health-bar",
  "type": "registry:component",
  "title": "8-bit Health Bar",
  "description": "An 8-bit health bar component for game UI.",
  "registryDependencies": ["progress"],
  "files": [
    {
      "path": "components/​ui/​8bit/​health-bar.tsx",
      "type": "registry:component",
      "target": "components/​ui/​8bit/​health-bar.tsx"
    },
    {
      "path": "components/​ui/​8bit/​progress.tsx",
      "type": "registry:component",
      "target": "components/​ui/​8bit/​progress.tsx"
    },
    {
      "path": "components/​ui/​8bit/​styles/​retro.css",
      "type": "registry:component",
      "target": "components/​ui/​8bit/​styles/​retro.css"
    }
  ]
}

Key Principles

1. Type - Use registry:component for single, registry:block for layouts
2. retro.css required - Always include in files array
3. Target path - Same path for source and target
4. Categories - Use gaming for retro-themed blocks
5. Dependencies - List base shadcn/​ui components (not 8-bit)
6. Description - Clear, concise for CLI output
7. Files order - Component first, retro.css last

Adding a New Component

1. Create component in components/​ui/​8bit/​component.tsx
2. Create documentation in content/​docs/​components/​component.mdx
3. Add entry to registry.json:
   • Copy existing component as template
   • Update name, title, description
   • Set correct registryDependencies
   • Include retro.css in files
4. Test: pnpm dlx shadcn@latest add @8bitcn/​component

Reference

• registry.json - Full component registry
• content/​docs/​components/​*.mdx - Component documentation