UI组件库

ZeroH UI是一个自定义的shadcn/ui设计系统,包含主题化组件库、注册表元数据和Next.js文档站点。

  • by 4rt3miy
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 4rt3miy/zeroh-ui-reg

使用说明

ZeroH用户界面

ZeroH UI是一个定制的shadcn/UI设计系统,包含:

  • 下的主题组件库 src/components/ui
  • 注册表元数据 registry/*.json 通过shadcn MCP消耗品
  • Next.js文档网站,用于浏览组件、令牌和MCP使用情况

将此存储库用作设计系统、文档和注册表分发的唯一真实来源。

项目结构

src/
  app/                # Docs site routes (home, components, foundations, mcp)
  components/
    ui/               # Themed shadcn primitives
    sections/         # Docs-specific UI
    previews/         # Component preview renderers
  lib/
    components.config.ts   # Metadata powering docs + registry generator
    registry-generator.ts  # Script to emit registry JSON
registry/             # Generated registry entries
components.json       # Registry URL mapping (for MCP clients)
.cursor/.vscode       # MCP client configuration files

可用脚本

  • npm run dev --在本地启动文档站点
  • npm run build --创建生产构建
  • npm run lint --为项目添油加醋
  • npm run generate:registry --再生 registry/*.json 从 components.config.ts

使用注册表

  1. 发布此存储库(或确保消费者可以访问默认分支)。
  2. 为队友提供MCP配置 /mcp.
  3. 在游标(或VS代码)中保持MCP服务器配置 .cursor/mcp.json:
{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": ["shadcn@latest", "mcp"]
    }
  }
}
  1. 消费者将注册表URL添加到他们的项目中 components.json:
{
  "registries": {
    "@zeroh": "https://raw.githubusercontent.com/4rt3miy/zeroh-ui-reg/main/registry/{name}.json"
  }
}

现在,启用MCP的编辑器(Cursor、VS Code、Codex)可以按命名空间浏览和安装ZeroH UI组件,例如。 @zeroh/button.