组件库的新选择-Banana UI,一套原生跨框架的组件库

Github: github.com/FriedRiceNo...

官方文档: banana-ui.com/

Banana UI 是什么

Banana UI 是一套原生支持跨框架的组件库,它提供了一套常用的组件。Banana UI 历经一年多的开发,已在数个生产项目中经过验证,目前正在稳定迭代中。

Banana UI 的一些特性/特点

  • 🧩 可用于几乎任何 Web 框架(React、Vue、以及其他...)
  • 🌐 可用于原生环境(无框架)
  • 🚀 支持 SSR(甚至能用于 worker 环境)
  • 🛡 良好的 TypeScript 支持
  • 📱 适用于 PC 端,移动端也可用
  • 🧪 完善的单元测试

Banana UI 解决了什么问题?

Banana 最大的特点是它是一个基于 Web Components 的组件库,这意味着它可以在几乎所有的前端框架中使用,也可以在原生环境(无框架)中使用;并且它还支持服务端渲染(SSR) ,甚至可以用于 worker 环境。这意味着你几乎可以在任何地方使用它。

Banana 似乎是现在国内唯一一个支持服务端渲染的 Web Components 组件库。

基于这点,Banana 适合这些场景:

  • 你正在开发一个需要支持多种框架的组件/插件/工具。
  • 你有多个项目,它们使用不同的前端框架,你希望能够在这些项目中使用相同的组件库。
  • 你开发的项目正在使用模板引擎,而不是前端框架(比如 Shopify、Wordpress 等)。
  • 你开发的项目没有使用前端框架,而是原生环境。
  • React 用户,我们提供了一个 React 版本,它对 React 做了专门的适配,可以更好地和 React 配合使用。
  • 当然,Vue 项目或其他 Web 框架也可以使用 Banana。

Q & A

  1. 我可以把它用于生产环境吗?

    可以。Banana UI 已经在一些项目中使用。但是请注意,它仍然处于早期阶段,可能会有一些问题。如果你在使用过程中遇到了问题,欢迎在 Issues 区 上提出问题或寻求帮助。

作者注:我目前在一个跨境电商公司工作,公司最大的 C 端项目以及它的一些内部系统都在使用 Banana UI。

  1. Banana UI 使用了什么技术?

    Banana UI 底层基于Web Components,并使用Lit进行开发。

  2. Banana UI 是一个PC端组件库还是移动端组件库?

    它是一个面向PC端,移动端也可用的组件库,我们在组件设计上从PC端出发的同时,也在尽力保障移动端的可用性。事实上,我们也确实有把Banana UI用于移动端的项目。同时,如果你需要一个面向移动端的同类型组件库,你可以看看Quark Design

寻求帮助 & 参与贡献

欢迎任何形式的提问和贡献,你可以在 Issues 区 上提出问题或寻求帮助。 如果你想参与贡献,希望可以先查看 贡献指南

一些链接:

相关推荐
道不尽世间的沧桑12 分钟前
第9篇:插槽(Slots)的使用
前端·javascript·vue.js
bin915315 分钟前
DeepSeek 助力 Vue 开发:打造丝滑的滑块(Slider)
前端·javascript·vue.js·前端框架·ecmascript·deepseek
uhakadotcom33 分钟前
最新发布的Tailwind CSS v4.0提供了什么新能力?
前端
GISer_Jing43 分钟前
Node.js中如何修改全局变量的几种方式
前端·javascript·node.js
秋意钟1 小时前
Element UI日期选择器默认显示1970年解决方案
前端·javascript·vue.js·elementui
bramble1 小时前
Windows使用Trae全程提问来创建一个彩色贪吃蛇游戏,可以设置速度并查看游戏记录。
前端·程序员·trae
我命由我123452 小时前
微信小程序 - 自定义实现分页功能
前端·微信小程序·小程序·前端框架·html·html5·js
程序员黄同学2 小时前
请谈谈 Vue 中的 key 属性的重要性,如何确保列表项的唯一标识?
前端·javascript·vue.js
繁依Fanyi2 小时前
巧妙实现右键菜单功能,提升用户操作体验
开发语言·前端·javascript·vue.js·uni-app·harmonyos
前端御书房2 小时前
前端防重复请求终极方案:从Loading地狱到精准拦截的架构升级
前端·javascript