Galaxy UI 组件库:3795 个社区 UI 组件完整免费使用指南
Galaxy UI 组件库3795 个社区 UI 组件完整免费使用指南【免费下载链接】galaxyThe largest Open-Source UI Library! Community-made and free to use. Made with either CSS or Tailwind.项目地址: https://gitcode.com/gh_mirrors/gal/galaxy深夜在调演示页按钮还是长得像教科书里的方框。你不想从零手写几十行 CSS更想直接找个现成做得不错的。Galaxy 就是干这个的它把 Uiverse.io 社区创作的 3795 个 UI 组件按钮、卡片、加载动画等归档进来你挑一个、拷走就能用。 Galaxy 是什么Uiverse.io 的官方归档仓库社区成员在平台提交组件审核通过后自动同步到这里。仓库实测数据共3795个 HTML 文件一个文件只装一个组件分成11个分类目录Buttons、Cards、loaders、Toggle-switches 等Buttons/ 里按钮最多1227个Cards/ 有 726 个loaders/ 有 716 个加载动画单个文件通常只有几百字节到几 KB浏览器直接打开就能看效果 适合谁赶工期的开发做演示页、原型时直接拷走带悬停动效和过渡的组件省掉手写的时间作品集页面作者不懂设计也能挑出动效精致的按钮、卡片和加载屏页面不显简陋正在学 CSS 的新手3795 个可运行实例是理解 cubic-bezier 曲线和伪元素定位的好素材 先克隆再上手克隆仓库git clone https://gitcode.com/gh_mirrors/gal/galaxy完成后本地就有 11 个分类目录不需要跑任何安装命令。打开预览从 Buttons/ 里挑任意一个文件用浏览器打开组件效果会直接渲染出来悬停动效用鼠标就能试。拷进页面打开源码把元素标记和底部的style块一起复制到你的 HTML 里刷新即可正常显示。 内容里有什么自包含的独立文件每个组件都是标记加样式、零依赖例如实测 cssbuttons-io_calm-tiger-42.html 只有 1253 字节。用哪个拷哪个不用引入整个仓库。CSS 与 Tailwind 双写法大部分组件用原生 CSS 编写另有 104 个文件使用 Tailwind 工具类Buttons/ 里 73 个、Cards/ 里 30 个。你的项目用 Tailwind就能找到同一套风格的写法参照。作者信息写进文件名文件名按「用户名_组件名-编号」组织文件内的样式注释还标了创作者如 From Uiverse.io by cssbuttons-io。想署名时看一眼文件名就行不用翻提交历史。目录即分类11 个目录把表单控件家族收得很全Toggle-switches/ 260 个开关、Inputs/ 226 个输入框、Checkboxes/ 171 个、Radio-buttons/ 102 个外加 Patterns/ 的 103 种背景纹理和 Notifications/ 的 23 个通知条。✂️ 挑选时的几条建议效果满意再拷代码先把组件在浏览器里看一遍动效觉得顺眼再复制不要对着源码猜。同类组件横向比 3~5 个同一目录下常有思路相近的实现比完再选通常比只看第一个更合适。从颜色和圆角入手改组件的视觉差异大多集中在 background-color、border-radius、transition 这几个属性上改掉就能贴合品牌。Tailwind 版本可自己转项目不用 Tailwind 时把工具类写成等价 CSS 即可组件本身很小转换成本可控。⚖️ 开用前须知✅ MIT 协议商业项目里使用、修改、分发都没问题详见 LICENSE⚠️ 新组件不走仓库需提交到 Uiverse.io 平台审核通过后自动同步入库直接给仓库提 PR 会被忽略见 README.md⚠️ 没有 npm 包可装集成方式就是复制代码介意的话提前知道⚠️ 署名不强制但官方建议注明使用时给原作者和 Uiverse.io 留一行注释好看的界面不必每次都亲手打磨。克隆仓库今天就把页面上那个呆板的按钮换掉 【免费下载链接】galaxyThe largest Open-Source UI Library! Community-made and free to use. Made with either CSS or Tailwind.项目地址: https://gitcode.com/gh_mirrors/gal/galaxy创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考