Uiverse

一个开源免费的UI元素库，里面有3500多个现成组件，都是用纯CSS或者Tailwind CSS写的。这些代码能直接复制到Webflow、Wix、React、Vue等项目里用，不用装依赖，也不收费，更不用署名。

#Ai工具箱 #Ai编程建站

Uiverse简介

Uiverse是个开源免费的UI元素社区库，由全球开发者在GitHub上一起维护。里面有3500多个现成组件（像按钮、卡片、表单、加载动画这些），都是用纯CSS或者Tailwind CSS写的。这些代码能直接复制到Webflow、Wix、React、Vue等项目里用，不用装依赖，也不收费，更不用署名。另外，它还支持一键复制到Figma，方便设计师快速搭原型。

Uiverse：一个开源、免费的UI元素库

Uiverse主要特点

资源多：现在收集了6975多个社区做的UI元素，还在不断更新。
完全免费：个人和商业都能免费用（因为是开源的）。
格式全：能一键复制成HTML/CSS、Tailwind、React格式，还能导入Figma，方便设计和开发一起用。
能预览：在线能看到真实的交互效果，方便快速选合适的，也能调试。

Uiverse使用方法

去官网uiverse.io，在顶部搜索或者分类里找想要的元素，比如按钮、卡片、表单、提示框、加载动画这些。点进组件页面，点“Get code”。页面左边是实时预览，右边是可以复制的代码，能按自己需求改改再复制到项目里。要是需要做设计稿协作，直接把组件复制到Figma里，这样视觉和交互规范就能统一了。

新手快速上手Uiverse步骤

打开uiverse.io，搜“button gradient”，看中第3个，点右下角“Copy Code”。在本地新建个index.html文件，把代码粘贴进去，把<link>标签里的href改成CDN地址或者下载到本地。打开浏览器，按钮就能点了；按F12切换到移动端，动画正常就行。想换颜色？在:root里把--color-primary改成你的品牌色，刷新页面就行。想批量用？用命令“npm i -g uui”安装工具，然后输入“uui search button --limit=30 --output=./lib”，把生成的文件拖进项目里就完成了。

Uiverse适用场景

适合快速搭原型、做中后台界面，也能用来学交互细节和找代码灵感。不过这些组件主要是样式和交互，一般没有复杂的业务逻辑，实际用的时候要结合项目框架做状态管理和可访问性优化。商用没问题，资源遵循MIT许可，个人和商业项目都能自由用。

常见问题解答

问：Uiverse作为开源UI元素库，核心优势是什么？能帮设计师和开发者解决什么实际问题？

答：核心优势有三点。一是资源多还免费，有6975个社区创建的UI元素，个人和商业都能100%免费用，降低了获取高质量UI资源的成本。二是格式适配多，支持HTML/CSS、Tailwind、React、Figma四种格式复制，不用额外转换，解决了“设计稿难转代码”“不同开发框架难适配”的问题。三是社区活跃，有246805名贡献者和Discord交流社区，能及时拿到新资源、解决使用问题，避免自己开发时信息不通。

问：在Uiverse上，要是想把某个UI元素用在Figma设计或者React开发项目里，具体怎么操作？

答：分两种情况：

Figma设计场景：进到目标UI元素的详情页，直接用平台提供的“Copy to Figma”功能，文档里说的“Copy and paste to Figma from any element page”，把元素复制粘贴到Figma软件里就能直接用。

React开发场景：进到目标UI元素的详情页，点页面里的“Get code”按钮，选“React”格式的代码，把代码复制到自己的React项目里，按需调整下参数就能集成好。

到头啦！

Relume