OpenSci UI

自定义的 UI 组件库和 CLI 工具，类似 shadcn/ui。

特性

• 🎨 多种颜色主题（Slate, Gray, Zinc, Neutral, Stone）
• 🌓 内置 Dark Mode 支持
• 📦 组件注册表系统
• 🛠️ 自定义 CLI 工具
• ⚡ Next.js 16 + React 19 + Tailwind CSS 4
• 🎯 TypeScript 完整支持
• 🤖 MCP Server 支持 - 通过 Claude Desktop 访问组件

快速开始

1. 安装依赖

npm install

2. 构建 CLI

npm run build:cli
npm link

3. 启动开发服务器

npm run dev

服务器将在 http://localhost:5001 运行，提供组件注册表 API。

4. 初始化项目

opensci-ui init

这将使用默认配置创建项目结构：

• 样式：Default
• 基础颜色：Zinc
• CSS 变量：启用

5. 添加组件

# 交互式选择组件
opensci-ui add

# 直接安装特定组件
opensci-ui add button

# 安装多个组件
opensci-ui add button card dialog

项目结构

opensci-ui/
├── app/                    # Next.js 应用
│   ├── api/               # API 路由
│   │   └── registry/      # 组件注册表 API
│   └── globals.css        # 全局样式
├── cli/                   # CLI 工具源码
│   ├── commands/          # CLI 命令
│   ├── utils/             # 工具函数
│   └── dist/              # 编译输出
├── components/            # React 组件
│   └── ui/                # UI 组件
├── lib/                   # 工具库
│   └── utils.ts           # cn() 等工具函数
├── mcp-server/            # MCP Server (Model Context Protocol)
│   ├── src/               # MCP 服务器源码
│   └── dist/              # 编译输出
├── registry/              # 组件注册表
│   ├── components/        # 组件定义 JSON
│   ├── ui/                # 组件源码
│   ├── index.json         # 注册表索引
│   └── schema.json        # JSON Schema
└── scripts/               # 构建脚本
    └── generate-registry.ts

CLI 命令

opensci-ui init

初始化项目配置，使用默认设置创建：

• components.json 配置文件（style: default, baseColor: zinc）
• components/ui/ 组件目录
• lib/utils.ts 工具文件
• app/globals.css 样式文件（Zinc 主题 + CSS 变量）

opensci-ui add [components...]

从注册表添加组件：

• 自动安装 npm 依赖
• 递归安装组件依赖
• 写入组件文件到项目

选项：

• --yes, -y - 跳过确认提示
• --overwrite, -o - 覆盖已存在的文件
• --cwd <path> - 指定工作目录
• --path <path> - 指定组件安装路径

颜色主题

支持 5 种 baseColor，每种都有完整的 light/dark 模式：

| 颜色 | 特点 | HSL 范围 | |------|------|----------| | Slate | 偏蓝灰色，现代感 | 200-220 | | Gray | 中性灰色，专业 | 0 | | Zinc | 偏冷灰色，简洁 | 240 | | Neutral | 纯灰色，平衡 | 0 | | Stone | 偏暖灰色，温暖 | 20-40 |

组件注册表

添加新组件

1. 在 registry/ui/ 创建组件源码
2. 运行生成脚本：

npx tsx scripts/generate-registry.ts --all registry/ui registry/components

3. 更新 registry/index.json 添加组件信息

注册表 API

• GET /api/registry - 获取组件列表
• GET /api/registry/{name}.json - 获取特定组件

开发脚本

# 启动开发服务器（端口 5001）
npm run dev

# 构建 Next.js 应用
npm run build

# 构建 CLI 工具
npm run build:cli

# 构建 MCP Server
npm run build:mcp

# 启动生产服务器
npm start

# 运行 ESLint
npm run lint

技术栈

• Framework: Next.js 16 (App Router)
• UI Library: React 19
• Styling: Tailwind CSS 4
• Language: TypeScript 5
• CLI: Commander + @clack/prompts
• Tools: tsx, clsx, tailwind-merge

文档

快速开始

• 📦 安装指南 - 使用 npx opensci-ui init 安装
• ⚡ 快速开始 - 5 分钟快速上手指南

主题系统

• 🎨 主题系统 - 完整的 Tailwind v4 主题文档
• 🎭 Tailwind v4 主题 - 深入了解主题配置

MCP Server

• 🤖 MCP Server 使用指南 - 通过 Claude Desktop 访问组件
• 📖 MCP Server README - 技术文档和 API 说明

在线演示

访问开发服务器查看：

• 主题演示 - 所有颜色和组件演示
• 按钮组件 - 按钮组件示例

依赖说明

运行时依赖

• next - Next.js 框架
• react + react-dom - React 库

开发依赖

• typescript - TypeScript 编译器
• tailwindcss - CSS 框架
• commander - CLI 框架
• @clack/prompts - 交互式提示
• chalk - 终端颜色
• node-fetch - HTTP 请求
• clsx + tailwind-merge - 样式工具

License

MIT