ARTICLE DETAIL

资讯详情

深耕商务建站与企业官网运营的一线实战洞察。

如何使用 uiverse-io/galaxy:一个超过 3000 个免费 UI 元素的宝藏库

如何使用 uiverse-io/galaxy:一个超过 3000 个免费 UI 元素的宝藏库 如何使用 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/
返回列表
PREV
查看更多资讯
NEXT
返回资讯列表