Uiverse - 这个网站提供 4000 多个优雅精致的前端 UI 元素/组件，拿来就可以用，全都免费开源

很多开箱即用的 UI 组件元素，无论是学习还是使用都很合适。

关于 Uiverse

Uiverse

是一个专门提供用作前端开发的各种酷炫 UI 组件的网站，名称的意思是

Universe of UI

，即 UI 宇宙。这个网站由来自捷克的

Pixel Galaxies s.r.o

公司建立并且运营，上面所有的 UI 元素都是来自世界各地的设计师和开发者自发分享自己的创意，并且将代码上传到上面，供其他人来学习和使用的。

值得 UI 设计师和开发者关注的理由

• 极具创意的 UI 元素/组件，大多数作品都运用了现代 CSS 语法构建，同时兼具了视觉和体验，无论是学习还是拿来使用，都非常适合；

• 所见即所得

  。网站上展示的所有的 UI 元素都是运行的结果，可以直观地体验，感受酷炫和细致的交互。

上手体验和使用建议

Uiverse 网站十分简洁大气，首页是一系列新潮精致的按钮和

开关组件

，我们可以在首页的搜索框中输入关键词来搜索组件，比如“

表单

”。这样就能查看所有表单组件，几乎包含了常见的 UI 界面。

包含的 UI 组件类别

• Checkboxe 复选框
• Card 卡片
• Input 输入框
• Form 表单
• Tooltip 气泡提示
• Button 按钮
• Toggle switche 切换开关
• Loader 加载动画
• Radio button 选项按钮
• Pattern 平铺图案

共计 4000+ 元素，像 ChatGPT 的聊天组件、密码输入、登录框也都有，非常丰富。

预览效果和使用

看到合适的组件，我们可以点击「

Get Code

」按钮，就进入到组件的预览页面。左侧是组件的实时运行效果，右侧就是该组件的所有代码，不仅可以直接复制代码到项目中，也可以

实时修改测试

，研究学习体验很好。

如果设计软件使用的是 Figma，很多组件还可以把当前的 UI 设计稿复制到 Figma 项目中，方便设计师集成到项目进行二次修改。

组件元素的来源

在 Uiverse 网站中，除了有各种 UI 元素的展示，还有一个栏目叫「

Challenges

」，这是官方发布的组件代码实现的技术挑战活动，吸引了很多开发者去参加，最后会把体验最优秀、代码实现最优雅的组件收录到网站中。怪不得会有那么多精致又有创意的组件，感兴趣的开发者也可以去发挥自己的创意。

免费开源说明

从 Uiverse 网站的底部我们可以看到官方的声明，所有的 UI 元素/组件都是基于 MIT 开源协议发布的，我们可以自由地下载来使用，也可以

用在商业项目

上，这么多优质的 UI 组件，相信一定会有适合你的，非常值得收藏来使用。