# banana-ui **Repository Path**: ChaoMiFen/banana-ui ## Basic Information - **Project Name**: banana-ui - **Description**: 基于Web Components，跨框架可用的现代化组件库。https://banana-ui.com - **Primary Language**: TypeScript - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 1 - **Created**: 2024-03-26 - **Last Updated**: 2025-05-15 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Banana UI [![NPM version](https://img.shields.io/npm/v/@banana-ui/banana.svg?style=flat)](https://www.npmjs.com/package/@banana-ui/banana) [![NPM downloads](http://img.shields.io/npm/dm/@banana-ui/banana.svg?style=flat)](https://www.npmjs.com/package/@banana-ui/banana) [![Jsdelivr](https://data.jsdelivr.com/v1/package/npm/@banana-ui/banana/badge)](https://www.npmjs.com/package/@banana-ui/banana) [![Bundle size](https://img.shields.io/bundlephobia/minzip/@banana-ui/banana)](https://www.npmjs.com/package/@banana-ui/banana?activeTab=code) ![License](https://img.shields.io/github/license/FriedRiceNoodles/banana-ui) [![DeepWiki](https://img.shields.io/badge/DeepWiki-FriedRiceNoodles%2Fbanana--ui-blue.svg?logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAyCAYAAAAnWDnqAAAAAXNSR0IArs4c6QAAA05JREFUaEPtmUtyEzEQhtWTQyQLHNak2AB7ZnyXZMEjXMGeK/AIi+QuHrMnbChYY7MIh8g01fJoopFb0uhhEqqcbWTp06/uv1saEDv4O3n3dV60RfP947Mm9/SQc0ICFQgzfc4CYZoTPAswgSJCCUJUnAAoRHOAUOcATwbmVLWdGoH//PB8mnKqScAhsD0kYP3j/Yt5LPQe2KvcXmGvRHcDnpxfL2zOYJ1mFwrryWTz0advv1Ut4CJgf5uhDuDj5eUcAUoahrdY/56ebRWeraTjMt/00Sh3UDtjgHtQNHwcRGOC98BJEAEymycmYcWwOprTgcB6VZ5JK5TAJ+fXGLBm3FDAmn6oPPjR4rKCAoJCal2eAiQp2x0vxTPB3ALO2CRkwmDy5WohzBDwSEFKRwPbknEggCPB/imwrycgxX2NzoMCHhPkDwqYMr9tRcP5qNrMZHkVnOjRMWwLCcr8ohBVb1OMjxLwGCvjTikrsBOiA6fNyCrm8V1rP93iVPpwaE+gO0SsWmPiXB+jikdf6SizrT5qKasx5j8ABbHpFTx+vFXp9EnYQmLx02h1QTTrl6eDqxLnGjporxl3NL3agEvXdT0WmEost648sQOYAeJS9Q7bfUVoMGnjo4AZdUMQku50McDcMWcBPvr0SzbTAFDfvJqwLzgxwATnCgnp4wDl6Aa+Ax283gghmj+vj7feE2KBBRMW3FzOpLOADl0Isb5587h/U4gGvkt5v60Z1VLG8BhYjbzRwyQZemwAd6cCR5/XFWLYZRIMpX39AR0tjaGGiGzLVyhse5C9RKC6ai42ppWPKiBagOvaYk8lO7DajerabOZP46Lby5wKjw1HCRx7p9sVMOWGzb/vA1hwiWc6jm3MvQDTogQkiqIhJV0nBQBTU+3okKCFDy9WwferkHjtxib7t3xIUQtHxnIwtx4mpg26/HfwVNVDb4oI9RHmx5WGelRVlrtiw43zboCLaxv46AZeB3IlTkwouebTr1y2NjSpHz68WNFjHvupy3q8TFn3Hos2IAk4Ju5dCo8B3wP7VPr/FGaKiG+T+v+TQqIrOqMTL1VdWV1DdmcbO8KXBz6esmYWYKPwDL5b5FA1a0hwapHiom0r/cKaoqr+27/XcrS5UwSMbQAAAABJRU5ErkJggg==)](https://deepwiki.com/FriedRiceNoodles/banana-ui) `Banana UI` 是一套底层基于 `Web Components` 的组件库，它提供了一套常用的组件。 官方文档: - https://banana-ui.com/ - 国内镜像: https://banana.youniverse.cc/ （没开启科学上网的用户可以访问这里） 除了官方文档以外，**强烈推荐**查看 DeepWiki: https://deepwiki.com/FriedRiceNoodles/banana-ui ## ⭐️ 特性 - 🧩 **可用于几乎任何 Web 框架（React、Vue、以及其他...）** - 🌐 **可用于原生环境（无框架）** - 🚀 **支持 SSR（甚至能用于 worker 环境）** - 🛡 良好的 TypeScript 支持 - 📱 适用于 PC 端，移动端也可用 - 🧪 完善的单元测试 ## Banana 解决了什么问题？ Banana 最大的特点是它是一个基于 Web Components 的组件库，这意味着它可以在几乎所有的前端框架中使用，也可以在原生环境（无框架）中使用；并且它还**支持服务端渲染（SSR）**，甚至可以用于 worker 环境。这意味着你几乎可以在任何地方使用它。 > Banana 似乎是现在国内唯一一个支持服务端渲染的 Web Components 组件库。 基于这点，Banana 适合这些场景： - 你正在开发一个需要支持多种框架的组件/插件/工具。 - 你有多个项目，它们使用不同的前端框架，你希望能够在这些项目中使用相同的组件库。 - 你开发的项目正在使用模板引擎，而不是前端框架（比如 Shopify、Wordpress 等）。 - 你开发的项目没有使用前端框架，而是原生环境。 - React 用户，我们提供了一个 React 版本，它对 React 做了专门的适配，可以更好地和 React 配合使用。 - 当然，Vue 项目或其他 Web 框架也可以使用 Banana。 ## 寻求帮助 & 参与贡献 欢迎任何形式的提问和贡献，你可以在 [Issues 区](https://github.com/FriedRiceNoodles/banana-ui/issues) 上提出问题或寻求帮助。 如果你想参与贡献，希望可以先查看 [贡献指南](/docs/guide/contributing.md)。 ## Q & A ### 我可以把它用于生产环境吗？ 可以。Banana UI 已经在一些项目中使用。但是请注意，它仍然处于早期阶段，可能会有一些问题。如果你在使用过程中遇到了问题，欢迎在 [Issues 区](https://github.com/FriedRiceNoodles/banana-ui/issues) 上提出问题或寻求帮助。 > 作者注：我目前在一个跨境电商公司工作，公司最大的 C 端项目以及它的一些内部系统都在使用 Banana UI。 ## LICENSE MIT