fumadocs-registry-integration

Original：🇺🇸 English

Translated

Register 8-bit components in registry.json for shadcn/ui add command. Apply when adding new components to the component library distribution.

1installs

Sourcetheorcdev/8bitcn-ui

Added on2026-02-07

NPX Install

npx skill4agent add theorcdev/8bitcn-ui fumadocs-registry-integration

SKILL.md Content

View Translation Comparison →

Registry Integration

Register 8-bit components in

registry.json

for discovery via

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

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

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

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

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

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

Key Principles

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

Adding a New Component

Create component in
```
components/ui/8bit/component.tsx
```
Create documentation in
```
content/docs/components/component.mdx
```
Add entry to
```
registry.json
```
:
- Copy existing component as template
- Update name, title, description
- Set correct registryDependencies
- Include retro.css in files

Test:

pnpm dlx shadcn@latest add @8bitcn/component

Reference

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

fumadocs-registry-integration

NPX Install

Tags

SKILL.md Content

Registry Integration

Component Entry Pattern

Block Entry Pattern

Required retro.css

Categories

Registry Dependencies

Type Selection

Complete Example

Key Principles

Adding a New Component

Reference