Back to Details

registry-component-patterns

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Registry Component Patterns

注册表组件配置模式

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

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": "chapter-intro",
  "type": "registry:block",
  "title": "8-bit Chapter Intro",
  "description": "A cinematic chapter/level intro with pixel art background.",
  "registryDependencies": ["card"],
  "categories": ["gaming"],
  "files": [
    {
      "path": "components/ui/8bit/blocks/chapter-intro.tsx",
      "type": "registry:block",
      "target": "components/ui/8bit/blocks/chapter-intro.tsx"
    },
    {
      "path": "components/ui/8bit/styles/retro.css",
      "type": "registry:component",
      "target": "components/ui/8bit/styles/retro.css"
    },
    {
      "path": "components/ui/8bit/card.tsx",
      "type": "registry:component",
      "target": "components/ui/8bit/card.tsx"
    }
  ]
}
对于游戏UI这类预构建布局：
json
{
  "name": "chapter-intro",
  "type": "registry:block",
  "title": "8-bit Chapter Intro",
  "description": "A cinematic chapter/level intro with pixel art background.",
  "registryDependencies": ["card"],
  "categories": ["gaming"],
  "files": [
    {
      "path": "components/ui/8bit/blocks/chapter-intro.tsx",
      "type": "registry:block",
      "target": "components/ui/8bit/blocks/chapter-intro.tsx"
    },
    {
      "path": "components/ui/8bit/styles/retro.css",
      "type": "registry:component",
      "target": "components/ui/8bit/styles/retro.css"
    },
    {
      "path": "components/ui/8bit/card.tsx",
      "type": "registry:component",
      "target": "components/ui/8bit/card.tsx"
    }
  ]
}

Required retro.css

必须包含retro.css

Always include 
retro.css
in registry entries:
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"
  }
]
所有注册表条目都必须包含
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:
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:
json
"registryDependencies": ["button", "dialog"]
For blocks with multiple components:
json
"registryDependencies": ["card", "button", "progress"]
列出基础shadcn依赖：
json
"registryDependencies": ["button", "dialog"]
对于包含多个组件的布局块：
json
"registryDependencies": ["card", "button", "progress"]

Key Principles

核心原则

  1. Type - Use 
    registry:component
    for single components, 
    registry:block
    for layouts
  2. retro.css required - Always include in files array
  3. Target path - Use same path for source and target
  4. Categories - Use 
    gaming
    for retro-themed components
  5. Dependencies - List base shadcn/ui components (not 8-bit versions)
  6. Description - Clear, concise description for CLI output
  1. 类型 - 单个组件使用
    registry:component
    ，布局块使用
    registry:block
  2. 必须包含retro.css - 始终在文件数组中包含该文件
  3. 目标路径 - 源路径与目标路径保持一致
  4. 分类 - 复古主题组件使用
    gaming
    分类
  5. 依赖 - 列出基础shadcn/ui组件（而非8-bit版本）
  6. 描述 - 为CLI输出提供清晰简洁的描述

Adding a New Component

添加新组件的步骤

  1. Create component in 
    components/ui/8bit/component.tsx
  2. Update 
    registry.json
    with entry (copy existing component as template)
  3. Include 
    retro.css
    dependency
  4. Test with: 
    pnpm dlx shadcn@latest add @8bitcn/component
  1. 在
    components/ui/8bit/component.tsx
    中创建组件
  2. 参考现有组件模板，在
    registry.json
    中添加对应条目
  3. 包含
    retro.css
    依赖
  4. 使用以下命令测试：
    pnpm dlx shadcn@latest add @8bitcn/component