Back to Details

fumadocs-registry-integration

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Registry Integration

注册表集成

Register 8-bit components in 
registry.json
for discovery via 
shadcn add @8bitcn/[component-name]
.
在
registry.json
中注册8-bit组件，以便通过
shadcn add @8bitcn/[组件名称]
命令发现这些组件。

Component Entry Pattern

组件条目格式

json
{
  "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"
    }
  ]
}
json
{
  "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:
json
{
  "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"
    }
  ]
}
对于游戏UI这类预构建布局：
json
{
  "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

必须包含retro.css

Always include 
retro.css
in files array:
json
"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"
  }
]
务必在files数组中包含
retro.css
：
json
"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:
json
"categories": ["gaming"]
Available categories: 
gaming
, 
layout
, 
form
, 
data-display
, 
feedback
, 
navigation
, 
overlay
.
游戏类组件请使用游戏专属分类：
json
"categories": ["gaming"]
可用分类：
gaming
, 
layout
, 
form
, 
data-display
, 
feedback
, 
navigation
, 
overlay
。

Registry Dependencies

注册表依赖

List base shadcn dependencies (not 8-bit versions):
json
"registryDependencies": ["button", "dialog", "progress"]
For blocks with multiple components:
json
"registryDependencies": ["card", "button", "progress", "tabs"]
列出基础shadcn依赖项（而非8-bit版本）：
json
"registryDependencies": ["button", "dialog", "progress"]
对于包含多个组件的区块：
json
"registryDependencies": ["card", "button", "progress", "tabs"]

Type Selection

类型选择

registry:component - Single reusable component:
json
{
  "type": "registry:component",
  "files": [...]
}
registry:block - Pre-built layout or feature:
json
{
  "type": "registry:block",
  "categories": ["gaming"],
  "files": [...]
}
registry:component - 单个可复用组件：
json
{
  "type": "registry:component",
  "files": [...]
}
registry:block - 预构建布局或功能模块：
json
{
  "type": "registry:block",
  "categories": ["gaming"],
  "files": [...]
}

Complete Example

完整示例

json
{
  "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"
    }
  ]
}
json
{
  "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
  1. 类型 - 单个组件使用
    registry:component
    ，布局使用
    registry:block
  2. 必须包含retro.css - 务必在files数组中包含该文件
  3. 目标路径 - 源路径与目标路径保持一致
  4. 分类 - 复古主题区块使用
    gaming
    分类
  5. 依赖项 - 列出基础shadcn/ui组件（而非8-bit版本）
  6. 描述 - 清晰简洁，适配CLI输出
  7. 文件顺序 - 组件文件在前，retro.css在后

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
  1. 在
    components/ui/8bit/component.tsx
    路径下创建组件
  2. 在
    content/docs/components/component.mdx
    路径下创建文档
  3. 向
    registry.json
    中添加条目：
    • 复制现有组件作为模板
    • 更新名称、标题、描述
    • 设置正确的registryDependencies
    • 在files中包含retro.css
  4. 测试：执行
    pnpm dlx shadcn@latest add @8bitcn/component

Reference

参考资料

  • registry.json
    - Full component registry
  • content/docs/components/*.mdx
    - Component documentation
  • registry.json
    - 完整组件注册表
  • content/docs/components/*.mdx
    - 组件文档