mcpField
F
fumadocs-registry-integration

fumadocs-registry-integration

github.com/theorcdevDevelopment2.1k83 installsUpdated 2d ago
Repository

About fumadocs-registry-integration

fumadocs-registry-integration documents how to register 8-bit components and prebuilt blocks in registry.json. It is for developers preparing components for discovery and installation through the shadcn CLI.

Key features

  1. 01Component and block entry patterns
  2. 02Required retro.css file registration
  3. 03Category and dependency guidance
  4. 04Source and target path conventions
  5. 05CLI installation test steps

Use cases

  1. 01Registering a reusable 8-bit component
  2. 02Adding a prebuilt game UI block
  3. 03Preparing a component for shadcn CLI installation

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/theorcdev/8bitcn-ui --skill fumadocs-registry-integration

After installing, type/fumadocs-registry-integrationin Claude Code to confirm it loaded.

Details

From the project README

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

Comments

Markdown supported