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" } ]
Categories
Use gaming-specific categories for game components:
json"categories": ["gaming"]
Available categories: 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"]
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:componentfor single,registry:blockfor layouts - retro.css required - Always include in files array
- Target path - Same path for source and target
- Categories - Use
gamingfor 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 registrycontent/docs/components/*.mdx- Component documentation


