2025工业企业数据治理实战：框架、主数据与质量落地全解析
2026/10/11 10:20:43
如何使用 uiverse-io/galaxy：一个超过 3000 个免费 UI 元素的宝藏库
相关地址
| 名称 | 地址 |
|---|---|
| GitHub 仓库（源代码） | uiverse-io/galaxy |
| 官网（推荐浏览入口） | uiverse.io/ |
| MCP 服务器配置参考 | 在 AI 工具的 MCP 配置中加入uiverse-mcp（支持npx一键运行） |
uiverse-io/galaxy是 Uiverse.io 官方维护的 GitHub 仓库，收录了超过3000 个由社区设计师贡献的免费 UI 元素。所有组件均基于MIT 开源协议，你可以自由用于个人或商业项目。
一、这个仓库里有什么？
仓库按组件类型分门别类，目前包含以下目录：
| 分类 | 说明 |
|---|---|
| Buttons | 按钮 |
| Cards | 卡片 |
| Checkboxes | 复选框 |
| Forms | 表单 |
| Inputs | 输入框 |
| Notifications | 通知提示 |
| Patterns | 背景图案 |
| Radio-buttons | 单选框 |
| Toggle-switches | 开关 |
| Tooltips | 工具提示 |
| loaders | 加载动画 |
每个组件都提供纯 CSS或Tailwind CSS两种实现方式，不依赖额外的 JavaScript 库，集成成本极低。
二、三种使用方式
方式一：手动浏览与复制（最通用）
适合所有开发者，无需任何额外工具。
- 浏览组件：虽然可以直接在 GitHub 仓库（https://github.com/uiverse-io/galaxy ）中查看分类文件夹，但官方推荐在 Uiverse.io 官网（https://uiverse.io/ ）浏览。官网支持实时预览和搜索，体验更好。
- 获取代码：找到喜欢的组件后，进入详情页，复制它的 HTML 和 CSS 代码。
- 集成到项目：将 HTML 放入页面结构，将 CSS 放入样式文件或
<style>标签即可。
方式二：使用 MCP 服务器（最适合 AI 编程）
如果你在使用 Cursor、Claude Code 等 AI 编程工具，可以通过配置 MCP 服务器让 AI 助手直接调用这个组件库。
- 安装配置：在 AI 工具的 MCP 配置中加入
uiverse-mcp，支持npx一键运行。 - 自动缓存：首次使用时会自动将
galaxy仓库克隆到本地并建立索引（约 85MB），后续使用速度很快。 - 对话式使用：直接用自然语言提需求即可。例如：“我需要一个玻璃拟态风格的定价卡片”，AI 就能搜索到并返回完整的 HTML 和 CSS 代码。
方式三：在设计工具中使用（面向设计师）
如果你使用Figma，可以在 Uiverse.io 上找到喜欢的元素，直接复制其设计稿并粘贴到 Figma 项目中，方便二次修改。
总结
uiverse-io/galaxy是一个拿来即用的 UI 组件宝库。无论你是手动复制代码的开发者、使用 AI 编程工具的效率党，还是习惯在 Figma 中工作的设计师，都能找到适合自己的使用方式。免费、开源、MIT 协议——没有理由不试试看。
核心地址速查：
- 源代码仓库：https://github.com/uiverse-io/galaxy
- 官方浏览与搜索平台：https://uiverse.io/