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

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

关于 Uiverse

Uiverse 是一个专门提供用作前端开发的各种酷炫 UI 组件的网站,名称的意思是 Universe of UI,即 UI 宇宙。这个网站由来自捷克的 Pixel Galaxies s.r.o 公司建立并且运营,上面所有的 UI 元素都是来自世界各地的设计师和开发者自发分享自己的创意,并且将代码上传到上面,供其他人来学习和使用的。

Uiverse 官网
Uiverse 官网

值得 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 组件,相信一定会有适合你的,非常值得收藏来使用。