fumadocs-registry-integration

レジストリとの連携

shadcn add @8bitcn/[component-name] で検出できるように、8-bit コンポーネントを registry.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"
    }
  ]
}

ブロックエントリーのパターン

ゲーム UI などの事前構築済みレイアウトの場合：

{
  "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"
    }
  ]
}

必須の retro.css

retro.css は必ず files 配列に含めてください：

"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": ["gaming"]

使用可能なカテゴリー：gaming、layout、form、data-display、feedback、navigation、overlay。

レジストリの依存関係

ベースとなる shadcn の依存関係（8-bit 版ではありません）を記載します：

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

複数のコンポーネントを含むブロックの場合：

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

タイプの選択

registry:component - 単一の再利用可能なコンポーネント：

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

registry:block - 事前構築済みのレイアウトまたは機能：

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

完全な例

{
  "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"
    }
  ]
}

主な原則

1. タイプ - 単一コンポーネントには registry:component、レイアウトには registry:block を使用します
2. retro.css は必須 - 必ず files 配列に含めます
3. ターゲットパス - ソースとターゲットに同じパスを指定します
4. カテゴリー - レトロテーマのブロックには gaming を使用します
5. 依存関係 - ベースとなる shadcn/ui コンポーネント（8-bit 版ではありません）を記載します
6. 説明 - CLI の出力向けに、明確で簡潔な説明を記載します
7. ファイルの順序 - コンポーネントを先頭に、retro.css を末尾にします

新しいコンポーネントの追加

1. components/ui/8bit/component.tsx にコンポーネントを作成します
2. content/docs/components/component.mdx にドキュメントを作成します
3. registry.json にエントリーを追加します：
   • 既存のコンポーネントをテンプレートとしてコピーします
   • name、title、description を更新します
   • 正しい registryDependencies を設定します
   • files に retro.css を含めます
4. テストします：pnpm dlx shadcn@latest add @8bitcn/component

参照

• registry.json - コンポーネントレジストリ全体
• content/docs/components/*.mdx - コンポーネントのドキュメント