> For the complete documentation index, see [llms.txt](https://docs.tenten.co/awesome/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.tenten.co/awesome/devops/awesome-uikit.md). # awesome-uikit ## Awesome UI Kit [![真棒](https://jaywcjlove.github.io/sb/ico/awesome.svg)](https://github.com/jaywcjlove/awesome-uikit) \[![CI](https://github.com/jaywcjlove/awesome-uikit/actions/workflows/ci.yml/badge.svg)]\( 收集 JS 框架、Web 組件庫和管理模板。 [![](https://github.com/tentenco/awesome/blob/main/devops/awesome-uikit/assets/react.svg)](https://github.com/facebook/react) [![](https://github.com/tentenco/awesome/blob/main/devops/awesome-uikit/assets/vue.svg)](https://github.com/tentenco/awesome/blob/main/devops/awesome-uikit/https:/%20/github.com/vuejs/vue/README.md) [![](https://github.com/tentenco/awesome/blob/main/devops/awesome-uikit/assets/angular-icon.svg)](https://github.com/angular/angular) [![](https://github.com/tentenco/awesome/blob/main/devops/awesome-uikit/assets/bootstrap.svg)](https://github.com/twbs/bootstrap) [![](https://github.com/tentenco/awesome/blob/main/devops/awesome-uikit/assets/uiw.svg)](https://github.com/uiwjs/uiw) [![](https://github.com/tentenco/awesome/blob/main/devops/awesome-uikit/assets/antd.svg)](https://github.com/ant-design/ant-design) [![](https://github.com/tentenco/awesome/blob/main/devops/awesome-uikit/assets/iview.png)](https://github.com/iview/iview) [![](https://github.com/tentenco/awesome/blob/main/devops/awesome-uikit/assets/vuetifyjs.svg)](https://github.com/vuetifyjs/vuetify) [![](https://github.com/tentenco/awesome/blob/main/devops/awesome-uikit/assets/Vue-Beauty.png)](https:/github.com/%20FE-Driver/vue-beauty/) [![](https://github.com/tentenco/awesome/blob/main/devops/awesome-uikit/assets/san-icon.svg)](https:/github.com/ecomfe/%20san-mui/) [< img src="https://web-cell.dev/WebCell-0.f1ffd28b.png" height="64px" />](https://github.com/EasyWebApp/WebCell)/assets/iview\.png" height="64px" /> [\](https://github.com/vuetifyjs/vuetify) [![](https://github.com/tentenco/awesome/blob/main/devops/awesome-uikit/assets/Vue-Beauty.png)](https://github.com/FE-Driver/vue-beauty) [![](https://github.com/tentenco/awesome/blob/main/devops/awesome-uikit/assets/san-icon.svg) ](https://github.com/ecomfe/san-mui)[![](https://web-cell.dev/WebCell-0.f1ffd28b.png)](https://github.com/EasyWebApp/WebCell)/assets/iview\.png" height="64px" /> [\](https://github.com/vuetifyjs/vuetify) [![](https://github.com/tentenco/awesome/blob/main/devops/awesome-uikit/assets/Vue-Beauty.png)](https://github.com/FE-Driver/vue-beauty) [![](https://github.com/tentenco/awesome/blob/main/devops/awesome-uikit/assets/san-icon.svg) ](https://github.com/ecomfe/san-mui)[![](https://web-cell.dev/WebCell-0.f1ffd28b.png)](https://github.com/EasyWebApp/WebCell)64px" /> [![](https://github.com/tentenco/awesome/blob/main/devops/awesome-uikit/assets/Vue-Beauty.png)](https://github.com/FE-Driver/vue-beauty) [![](https://github.com/tentenco/awesome/blob/main/devops/awesome-uikit/assets/san-icon.svg)\ ](https://github.com/ecomfe/san-mui)[![](https://web-cell.dev/WebCell-0.f1ffd28b.png) ](https://github.com/EasyWebApp/WebCell)64px" /> [![](https://github.com/tentenco/awesome/blob/main/devops/awesome-uikit/assets/Vue-Beauty.png)](https://github.com/FE-Driver/vue-beauty) [![](https://github.com/tentenco/awesome/blob/main/devops/awesome-uikit/assets/san-icon.svg)\ ](https://github.com/ecomfe/san-mui)[![](https://web-cell.dev/WebCell-0.f1ffd28b.png) ](https://github.com/EasyWebApp/WebCell)com/EasyWebApp/WebCell">![](https://web-cell.dev/WebCell-0.f1ffd28b.png)com/EasyWebApp/WebCell">![](https://web-cell.dev/WebCell-0.f1ffd28b.png) ### 內容 * [框架](#frameworks) * [三巨頭](#the-big-three) * [具有歷史意義的](#historically-significant) * [值得注意](#notable) * [手機](#mobile) * [小程序](#mini-program) * [其他人](#rest-of-the-pack) * [反應狀態](#state-of-the-react) * [Web 組件](#web-components) * [組件](#components) * [工具](#tools) * [UI 組件](#ui-components) * \[反應]（#反應） * [反應原生](#react-native) * [Vue](#vue) * \[角度]（#angular） * \[聖]（#聖） * [秘銀](#mithril) * [WebCell](#webcell) * [全押](#全押) * [傳統](#傳統) * [移動 UI 組件](#mobile-ui-components) * [反應](#react-1) * [反應原生](#react-native) * [Vue](#vue-1) * [微信](#wechat-1) * [傳統](#tradition-1) * [管理模板](#admin-template) * [反應](#react-2) * [Vue](#vue-2) * \[角度]（#angular-1） * [其他](#other) * [工具](#tools) * \[備忘單]（#備忘單） **解釋** !\[開源軟件]\[OSS Icon]表示**開源**，點擊進入**開源** repo；\ !\[hot]\[hot Icon] 表示**熱**； ＃＃ 構架 其中大部分來自：[JavaScript 框架終極指南](https://javascriptreport.com/the-ultimate-guide-to-javascript-frameworks/) #### 三巨頭 * [反應](https://reactjs.org) ![](https:/img.shields.io/github/stars/facebook/react.svg) ![](https://img.shields.io/npm/dm/react?label=) - 用於構建用戶界面的 JavaScript 庫。[!\[開源軟件\]\[OSS圖標\]](https://github.com/facebook/react) * [角度](https://angular.io) ![](https:/img.shields.io/github/stars/angular/angular.svg) ![](https://img.shields.io/npm/dm/angular?label=) - 一個框架。移動和桌面。[!\[開源軟件\]\[OSS圖標\]](https://github.com/angular/angular) * [Vue.js](https://vuejs.org) ![](https:/img.shields.io/github/stars/vuejs/vue.svg%20) ![](https://img.shields.io/npm/dm/vue?label=) - 一種漸進式、漸進式的 JavaScript用於在 Web 上構建 UI 的框架。[!\[開源軟件\]\[OSS圖標\]](https://github.com/vuejs/vue) #### 具有歷史意義 * [AngularJS](https://angularjs.org) ![](https:/img.shields.io/github/stars/angular/angular.js.svg) - AngularJS - 為 Web 應用程序增強的 HTML！[!\[開源軟件\]\[OSS圖標\]](https://github.com/angular/angular.js) * [Backbone](http://backbonejs.org) ![](https:/img.shields.io/github/stars/jashkenas/backbone.svg) ![](https://img.shields.io/npm/dm/backbone?label=) - 給你的 JS 應用一些帶模型的主幹，視圖、集合和事件。[!\[開源軟件\]\[OSS圖標\]](https://github.com/jashkenas/backbone/) * [Ember](https://www.emberjs.com) ![](https:/img.shields.io/github/stars/emberjs/ember.js%20.svg) - 用於創建雄心勃勃的 Web 應用程序的 JavaScript 框架。[!\[開源軟件\]\[OSS圖標\]](https://github.com/emberjs/ember.js) \###值得注意 * [Aurelia](http://aurelia.io) ![](https:/img.shields.io/github/stars/aurelia/framework.svg) - Aurelia 允許我們專注於業務邏輯，而不是框架。[!\[開源軟件\]\[OSS圖標\]](https://github.com/aurelia) * [anu](https://rubylouvre.github.io/anu/) ![](https:/img.shields.io/github/stars/RubyLouvre/anu%20.svg) - React16-compat 迷你庫。[!\[開源軟件\]\[OSS圖標\]](https://github.com/RubyLouvre/anu) * [榆樹](http://elm-lang.org) ![](https:/img.shields.io/github/stars/elm/core.svg%20) - Elm 網站的服務器和客戶端代碼。[!\[開源軟件\]\[OSS圖標\]](https://github.com/elm/core) * [FicusJS](https://docs.ficusjs.org) ![](https:/img.shields.io/github/stars/ficusjs/ficusjs.svg) - 使用 Web 組件開發應用程序的輕量級函數。[!\[開源軟件\]\[OSS圖標\]](https://github.com/ficusjs/ficusjs) * [HTM](https://github.com/developit/htm) ![](https:/img.shields.io/github/stars/developit/htm.%20svg) - 使用標準標記模板的 JSX 替代方案，具有編譯器支持。[!\[開源軟件\]\[OSS圖標\]](https://github.com/developit/htm) * [地獄](https://infernojs.org) ![](https:/img.shields.io/github/stars/infernojs/inferno.svg) - 一個非常快速的、類似 React 的 JavaScript 庫，用於構建現代用戶界面。[!\[開源軟件\]\[OSS Icon\]](https://github.com/infernojs/inferno) !\[hot]\[hot Icon] * [納米 JSX](https://github.com/yandeu/nano-jsx) ![](https:/img.shields.io/github/stars/yandeu%20/nano-jsx.svg) - 輕量級 1KB JSX 庫。[!\[開源軟件\]\[OSS圖標\]](https://github.com/yandeu/nano-jsx) * [聚合物](https://www.polymer-project.org) ![](https:/img.shields.io/github/stars/Polymer/polymer%20.svg) - 使用 Web 組件構建現代應用程序。[!\[開源軟件\]\[OSS圖標\]](https://github.com/Polymer/polymer) * [Preact](https://preactjs.com) ![](https:/img.shields.io/github/stars/developit/preact.svg) - 具有相同現代 API 的快速 3kB React 替代方案。組件和虛擬 DOM。[!\[開源軟件\]\[OSS圖標\]](https://github.com/developit/preact/) * [ReasonML](https://reasonml.github.io) ![](https:/img.shields.io/github/stars/facebook/reason.svg%20) - 利用 JavaScript 和 OCaml 生態系統的簡單、快速和類型安全的代碼。[!\[開源軟件\]\[OSS圖標\]](https://github.com/facebook/reason) * [Svelte](https://svelte.technology) ![](https://img.shields.io/github/stars/sveltejs/svelte.svg?label=) - 神奇的消失 UI 框架。[!\[開源軟件\]\[OSS Icon\]](https://github.com/sveltejs/svelte) !\[hot]\[hot Icon] * [固體](https://github.com/ryansolid/solid) ![](https:/img.shields.io/github/stars/ryansolid/solid%E3%80%82%20svg) - 用於構建用戶界面的聲明性、高效和靈活的 JavaScript 庫.. [!\[Open-Source Software\]\[OSS Icon\]](https://github.com/ryansolid/solid) ！ \[熱]\[熱圖標] ＃＃＃ 移動的 * [nativescript-vue](https://nativescript-vue.org) ![](https:/img.shields.io/github/stars/nativescript-vue%20/nativescript-vue.svg) - 具有 Vue 易用性的 NativeScript。[!\[開源軟件\]\[OSS圖標\]](https://github.com/nativescript-vue/nativescript-vue) * [react-native](http://facebook.github.io/react-native/) ![](https:/img.shields.io/github/stars%20/facebook/react-native.svg) - 使用 React 構建原生應用程序的框架。[!\[開源軟件\]\[OSS Icon\]](https://github.com/facebook/react-native) !\[hot]\[hot Icon] * [Weex](https://weex.apache.org) ![](https:/img.shields.io/github/stars/apache/incubator-weex%20.svg) - 用於構建移動跨平台 UI 的框架。[!\[開源軟件\]\[OSS圖標\]](https://github.com/apache/incubator-weex) \###小程序 * [alita](https://areslabs.github.io/alita) ![](https:/img.shields.io/github/stars/skyFi/weapp-%20native.svg) - 把 React Native 代碼轉換成微信小程序代碼的轉換引擎工具。 \[!\[開源軟件]\[OSS圖標]]\( -本國的） * [Antmove](https://ant-move.github.io) ![](https:/img.shields.io/github/stars/ant-move%20/Antmove.svg) - 編譯型跨端解決方案，基於支付寶/微信小程序，輕鬆地轉換成其他平台的小程序。 \[!\[開源軟件]\[OSS圖標]]\(https ://github.com/ant-move/Antmove) * [Anna Remax UI](https://ant-move.github.io/website/) ![](https:/img.shields.io/github/stars%20/ant-move.svlabel=) - 開發基於 Remax 框架的小程序 UI 組件庫。 \[!\[開源軟件]\[OSS Icon]\( AnnaSearl/anna-remax-ui) * [變色龍](http://cml.didi.cn) - ![](https:/img.shields.io/github/stars/didi/chameleon.%20sg) 設置代碼運行多端，所見即多端所見\[!\[Open-Source Software][OSS Icon/chameleon](https://github.comdidi/chameleon) * [mpx](https://didi.github.io/mpx/) ![](https:/img.shields.io/github/stars/didi/mpx%20.svg) - 滴滴開源小程序框架。 [!\[開源軟件\]\[OSS圖標\]](https://github.com/didi/mpx) * [mpvue](http://mpvue.com) ![](https:/img.shields.io/github/stars/Meituan-Dianping/mpvue.svg) - 基於 Vue.js 的小程序框架，從支持 Vue.js 的語法和製作工具開發。 [!\[開源軟件\]\[OSS 圖標\]](https://github.com/%E7%BE%8E%E5%9C%98%E9%BB%9E%E8%A9%95/mpvue) * [taro](https://taro.jd.com) ![](https:/img.shields.io/github/stars/NervJS/taro.svg%20) - 多端統一開發框架，支持小程序、H5、React Native等的應用。[!\[開源軟件\]\[OSS圖標\]](https://github.com/NervJS/taro) * [weapp-native](https://github.com/skyFi/weapp-native) ![](https:/img.shields.io/github/stars/%20skyFi/weapp-native.svg) - 像 React 一樣開發組件來開發微信小程序，開發微信小程序框架。 \[!\[Open-Source Software]\[OSS Icon]]\( .com/skyFi/weapp-native) * [wepy](https://tencent.github.io/wepy/) ![](https:/img.shields.io/github/stars/Tencent/wepy%20.svg) - 小程序組件化開發框架。 [!\[開源軟件\]\[OSS圖標\]](https://github.com/Tencent/wepy) * [Remax](https://remaxjs.org) ![](https://img.shields.io/github/stars/remaxjs/remax.svg?label=) - 將 React 運行在小程序環境中，讓你可以使用完整的 React 進行開發。 [!\[Open-Source Software\]\[OSS Icon\]](https://github.com/remaxjs/remax) * [uni-app](https://uniapp.dcloud.io) ![](https:/img.shields.io/github/stars/dcloudio/uni%20-app.svg) 使用Vue語法開發小程序、H5、App的統一框架[!\[開源軟件\]\[OSS圖標\]](https://github.com/dcloudio/uni-app) #### 包的其餘部分 * [AppRun](https://yysun.github.com/apprun) ![](https:/img.shields.io/github/stars/yysun/apprun.%20svg) - AppRun 是一個使用 elm 架構、事件和組件開發的應用程序。[!\[開源軟件\]\[OSS圖標\]](https://github.com/yysun/apprun) * [Atomico](https://github.com/UpperCod/Atomico) ![](https:/img.shields.io/github/stars/UpperCod/Atomico%E3%80%82%20svg) - 一個小型 (1.6kB) 庫，用於處理 Web 組件。[!\[開源軟件\]\[OSS圖標\]](https://github.com/UpperCod/Atomico) * [Binding.scala](https://github.com/ThoughtWorksInc/Binding.scala) ![](https:/img.shields.io/github/stars/%20ThoughtWorksInc/Binding.scala.svg) - Scala 的反應式數據綁定。[!\[開源軟件\]\[OSS圖標\]](https://github.com/ThoughtWorksInc/Binding.scala) * [avalon](http://avalonjs.coding.me) ![](https:/img.shields.io/github/stars/RubyLouvre/avalon.svg%20) - 一個優雅高效的 express mvvm 框架。[!\[開源軟件\]\[OSS圖標\]](https://github.com/RubyLouvre/avalon) * [Bobril](http://bobril.com) ![](https:/img.shields.io/github/stars/Bobris/Bobril.svg) - 具有虛擬 dom 的面向組件的框架（快速、穩定、帶有工具）。[!\[開源軟件\]\[OSS Icon\]](https://github.com/Bobris/Bobril) !\[hot]\[hot Icon] * [Choo](https://choo.io) ![](https:/img.shields.io/github/stars/choojs/choo.svg) - 堅固的 4kb 前端框架。[!\[開源軟件\]\[OSS圖標\]](https://github.com/choojs/choo) * [Cycle.js](https://cycle.js.org) ![](https:/img.shields.io/github/stars/cyclejs/cyclejs%20.svg) - 用於可預測代碼的功能性和反應式 JavaScript 框架。[!\[開源軟件\]\[OSS圖標\]](https://github.com/cyclejs/cyclejs) * [DIO](https://dio.js.org) ![](https:/img.shields.io/github/stars/thysultan/dio.js%20.svg) - 用於構建用戶界面的庫。[!\[開源軟件\]\[OSS Icon\]](https://github.com/thysultan/dio.js) !\[hot]\[hot Icon] * [道場](https://dojo.io) ![](https:/img.shields.io/github/stars/dojo/meta.svg) - 項目的元信息。[!\[開源軟件\]\[OSS圖標\]](https://github.com/dojo/meta) * [Domvm](http://leeoniya.github.io/domvm/) ![](https:/img.shields.io/github/stars/leoniya/domvm%20.svg) - DOM ViewModel - 一個輕薄、快速、無依賴的 vdom 視圖層。[!\[開源軟件\]\[OSS Icon\]](https://github.com/leeoniya/domvm) !\[hot]\[hot Icon] * [dva](https://github.com/dvajs/dva) ![](https:/img.shields.io/github/stars/dvajs/dva.%20svg) - 基於 React 和 redux 的輕量級和 elm 風格的框架。[!\[開源軟件\]\[OSS圖標\]](https://github.com/dvajs/dva) * [蝕刻](https://github.com/atom/etch) ![](https:/img.shields.io/github/stars/atom/etch.%20svg) - 使用簡單而明確的 API 圍繞 virtual-dom 構建組件。[!\[開源軟件\]\[OSS圖標\]](https://github.com/atom/etch) * [esx](http://elm-lang.org) ![](https:/img.shields.io/github/stars/esxjs/esx.svg%20) - 類似於 JSX，但原生且快速。[!\[開源軟件\]\[OSS圖標\]](https://github.com/esxjs/esx) * [Gruu](https://mareklabuz.github.io/gruu-docs/) ![](https:/img.shields.io/github/stars/MarekLabuz%20/gruu.svg) - 用於創建動態內容的 JavaScript 庫。[!\[開源軟件\]\[OSS圖標\]](https://github.com/MarekLabuz/gruu) * [微光](https://glimmerjs.com) ![](https:/img.shields.io/github/stars/glimmerjs/glimmer.js.svg%20) - Glimmer.js 項目的中央存儲庫。[!\[開源軟件\]\[OSS圖標\]](https://github.com/glimmerjs/glimmer.js) * [Hyperapp](https://hyperapp.js.org) ![](https:/img.shields.io/github/stars/jorgebucaran/hyperapp.svg%20) - 1 KB JavaScript 庫，用於構建 Web 應用程序。[!\[開源軟件\]\[OSS Icon\]](https://github.com/jorgebucaran/hyperapp) !\[hot]\[hot Icon] * [Hyperdom](https://github.com/featurist/hyperdom) ![](https:/img.shields.io/github/stars/featurist/hyperdom%E3%80%82%20svg) - 一個快速、功能豐富且簡單的框架，用於構建動態瀏覽器應用程序。[!\[開源軟件\]\[OSS圖標\]](https://github.com/featurist/hyperdom) * [hyperHTML](https://viperhtml.js.org) ![](https:/img.shields.io/github/stars/WebReflection/hyperHTML.svg%20) - 一種快速輕量的虛擬 DOM 替代方案。[!\[開源軟件\]\[OSS圖標\]](https://github.com/WebReflection/hyperHTML) * [Ivi](https://github.com/ivijs/ivi) ![](https:/img.shields.io/github/stars/ivijs/ivi.%20svg) - 用於構建 Web 用戶界面的 Javascript (TypeScript) 庫。[!\[開源軟件\]\[OSS Icon\]](https://github.com/ivijs/ivi) !\[hot]\[hot Icon] * [完整](https://javey.github.io/Intact) ![](https:/img.shields.io/github/stars/Javey/Intact%E3%80%82%20svg) - 一個可繼承的強邏輯模板前端 mvvm 框架。[!\[開源軟件\]\[OSS圖標\]](https://github.com/Javey/Intact) * [淘汰賽](http://knockoutjs.com) ![](https:/img.shields.io/github/stars/knockout/knockout.svg) - Knockout 可以更輕鬆地使用 JavaScript 創建豐富的響應式 UI。[!\[開源軟件\]\[OSS圖標\]](https://github.com/knockout/knockout) * [模型](https://maquettejs.org) ![](https:/img.shields.io/github/stars/AFASSoftware/maquette.svg) - 純粹簡單的虛擬 DOM 庫。[!\[開源軟件\]\[OSS圖標\]](https://github.com/AFASSoftware/maquette) * [Marko](https://markojs.com) ![](https:/img.shields.io/github/stars/marko-js/marko.svg%20) - 來自 eBay 的友好（且快速！）的 UI 庫，它使構建 Web 應用程序變得有趣。[!\[開源軟件\]\[OSS圖標\]](https://github.com/marko-js/marko) * [秘銀](https://mithril.js.org) ![](https:/img.shields.io/github/stars/MithrilJS/mithril.js%20.svg) - 用於構建出色應用程序的 Javascript 框架。[!\[開源軟件\]\[OSS圖標\]](https://github.com/MithrilJS/mithril.js) * [百萬](https://github.com/millionjs/million) ![](https:/img.shields.io/github/stars/millionjs/million.%20svg) - <1kb 虛擬 DOM - 很快！[!\[開源軟件\]\[OSS圖標\]](https://github.com/millionjs/million) * [月亮](http://moonjs.ga) ![](https:/img.shields.io/github/stars/kbrsh/moon.svg) - 一個最小的、超快的 UI 庫。[!\[開源軟件\]\[OSS圖標\]](https://github.com/kbrsh/moon) * [Maka.js](https://makajs.org) ![](https:/img.shields.io/github/stars/makajs/maka.svg) - 一個可繼承的強邏輯模板前端 mvvm 框架。[!\[開源軟件\]\[OSS圖標\]](https://github.com/makajs/maka) * [神經](https://nerv.aotu.io) ![](https:/img.shields.io/github/stars/NervJS/nerv.svg%20) - 超快的 React 替代方案，兼容 IE8 和 React 16。[!\[Open-Source Software\]\[OSS Icon\]](https://github.com/NervJS/nerv) * [NX](http://www.nx-framework.com) ![](https:/img.shields.io/github/stars/nx-js%20/framework.svg) - 一個模塊化的前端框架 - 受服務器端和 Web 組件的啟發。[!\[開源軟件\]\[OSS圖標\]](https://github.com/nx-js/framework) * [petit-dom](https://github.com/yelouafi/petit-dom) ![](https:/img.shields.io/github/stars/%20yelouafi/petit-dom.svg) - 極簡的虛擬 dom 庫。[!\[開源軟件\]\[OSS Icon\]](https://github.com/yelouafi/petit-dom) !\[hot]\[hot Icon] * [Picodom](https://github.com/picodom/picodom) ![](https:/img.shields.io/github/stars/picodom/picodom.%20svg) - 1 KB VDOM 構建器和補丁功能。[!\[開源軟件\]\[OSS Icon\]](https://github.com/picodom/picodom) !\[hot]\[hot Icon] * [Pux](http://purescript-pux.org) ![](https:/img.shields.io/github/stars/alexmingoia/purescript-pux%20.svg) - 使用 PureScript 構建類型安全的 Web 應用程序。[!\[開源軟件\]\[OSS圖標\]](https://github.com/alexmingoia/purescript-pux/) * [Ractive](https://ractive.js.org) ![](https:/img.shields.io/github/stars/ractivejs/ractive.svg%20) - 下一代 DOM 操作。[!\[開源軟件\]\[OSS圖標\]](https://github.com/ractivejs/ractive) * [react-lite](https://github.com/Lucifier129/react-lite) ![](https:/img.shields.io/github/stars/%20Lucifier129/react-lite.svg) - React 的實現，優化了小腳本大小。[!\[開源軟件\]\[OSS圖標\]](https://github.com/Lucifier129/react-lite) * [RE:DOM](https://redom.js.org) ![](https:/img.shields.io/github/stars/redom/redom%20.svg) - 用於創建用戶界面的微型 (2 KB) 渦輪增壓 JavaScript 庫。[!\[開源軟件\]\[OSS Icon\]](https://github.com/redom/redom) !\[hot]\[hot Icon] * [反射](https://github.com/mozilla/reflex) ![](https:/img.shields.io/github/stars/mozilla/reflex.%20svg) - 功能反應式 UI 庫。[!\[開源軟件\]\[OSS圖標\]](https://github.com/mozilla/reflex) * [防暴](http://riotjs.com) ![](https:/img.shields.io/github/stars/riot/riot.svg) - 簡單優雅的基於組件的 UI 庫。[!\[開源軟件\]\[OSS圖標\]](https://github.com/riot/riot) * [rxdomh](https://github.com/xialvjun/rx-domh) ![](https:/img.shields.io/github/stars/xialvjun/%20rx-domh.svg) - 創建 DOM 元素並在其上綁定 observables。[!\[開源軟件\]\[OSS圖標\]](https://github.com/xialvjun/rx-domh) * [聖](https://ecomfe.github.io/san/) ![](https:/img.shields.io/github/stars/ecomfe/san%20.svg) - 一個靈活的 JavaScript 組件框架。[!\[開源軟件\]\[OSS圖標\]](https://github.com/ecomfe/san) * [Simulacra.js](https://simulacra.js.org) ![](https:/img.shields.io/github/stars/daliwali/simulacra%20.svg) - DOM 的數據綁定函數。[!\[開源軟件\]\[OSS圖標\]](https://github.com/daliwali/simulacra) * [Slim.js](http://slimjs.com) ![](https:/img.shields.io/github/stars/eavichay/slim.js%E3%80%82%20svg) - 基於現代標準的快速且強大的前端微框架。[!\[開源軟件\]\[OSS圖標\]](https://github.com/eavichay/slim.js) * [STEM.JS](https://stemjs.org) ![](https:/img.shields.io/github/stars/mciucu/stemjs.svg%20) - 另一個 javascript 框架。[!\[開源軟件\]\[OSS圖標\]](https://github.com/mciucu/stemjs) * [剩餘](https://github.com/adamhaile/surplus) ![](https:/img.shields.io/github/stars/adamhaile/surplus.%20svg) - S.js 應用程序的高性能 JSX Web 視圖。[!\[開源軟件\]\[OSS Icon\]](https://github.com/adamhaile/surplus) !\[hot]\[hot Icon] * [Thermite](https://github.com/paf31/purescript-thermite) ![](https:/img.shields.io/github/stars/paf31/%20purescript-thermite.svg) - React 的簡單 PureScript 包裝器。[!\[開源軟件\]\[OSS圖標\]](https://github.com/paf31/purescript-thermite) * [TSERS](https://github.com/tsers-js/core) ![](https:/img.shields.io/github/stars/tsers-%20js/core.svg) - 反應式流的轉換信號執行器框架。[!\[開源軟件\]\[OSS圖標\]](https://github.com/tsers-js/core) * [Vidom](https://github.com/dfilatov/vidom) ![](https:/img.shields.io/github/stars/dfilatov/vidom%E3%80%82%20svg) - 基於虛擬 DOM 構建 UI 的庫。[!\[開源軟件\]\[OSS圖標\]](https://github.com/dfilatov/vidom) * [Vuera](https://github.com/akxcv/vuera) ![](https:/img.shields.io/github/stars/akxcv/vuera.%20svg) - React 中的 Vue，Vue 中的 React。兩者無縫融合。[!\[開源軟件\]\[OSS圖標\]](https://github.com/akxcv/vuera) * [WebCell](https://web-cell.dev) ![](https:/img.shields.io/github/stars/EasyWebApp/WebCell.svg%20) - 基於 JSX & TypeScript 的 Web 組件引擎 [!\[Open-Source Software\]\[OSS Icon\]](https://github.com/EasyWebApp/WebCell) #### 反應狀態 * [Constate](https://github.com/diegohaz/constate) ![](https:/img.shields.io/github/stars/diegohaz/constate%E3%80%82%20svg) - 反應上下文 + 狀態。[!\[開源軟件\]\[OSS圖標\]](https://github.com/diegohaz/constate) * [Easy Peasy](https://easy-peasy.dev) ![](https:/img.shields.io/github/stars/ctrlplusb/easy-%20peasy.svg) - React 的素食友好狀態。[!\[開源軟件\]\[OSS圖標\]](https://github.com/ctrlplusb/easy-peasy) * [Hox](https://github.com/umijs/hox) ![](https:/img.shields.io/github/stars/umijs/hox.%20svg) - React 的下一代狀態管理器。[!\[開源軟件\]\[OSS圖標\]](https://github.com/umijs/hox) * [冰庫](https://github.com/ice-lab/icestore) ![](https:/img.shields.io/github/stars/ice-%20lab/icestore.svg) - React 的下一代狀態管理器。[!\[開源軟件\]\[OSS圖標\]](https://github.com/ice-lab/icestore) * [Jotai](https://jotai.pmnd.rs) ![](https:/img.shields.io/github/stars/pmndrs/jotai.svg%20) - React 的原始和靈活的狀態管理。[!\[開源軟件\]\[OSS圖標\]](https://github.com/pmndrs/jotai) * [MobX](http://mobx.js.org) ![](https:/img.shields.io/github/stars/mobxjs/mobx.svg%20) - 簡單、可擴展的狀態管理。[!\[開源軟件\]\[OSS圖標\]](https://github.com/mobxjs/mobx) * [React Easy State](https://github.com/RisingStack/react-easy-state) ![](https:/img.shields.io/github/%20stars/RisingStack/react-easy-state.svg) - 簡單的 React 狀態管理。使用❤️ 和 ES6 代理製作。[!\[開源軟件\]\[OSS圖標\]](https://github.com/RisingStack/react-easy-state) * [Redux 工具包](https://redux-toolkit.js.org) ![](https:/img.shields.io/github/stars/reduxjs/%20redux-toolkit.svg) - 官方的、固執己見的、包含電池的工具集，用於高效的 Redux 開發 \[!\[Open-Source Software]\[OSS Icon]]\( -工具包） * [react-hooks-global-state](https://github.com/dai-shi/react-hooks-global-state) ![](https://github.com/tentenco/awesome/blob/main/devops/awesome-uikit/https:/%20img.shields.io/github/stars/dai-shi/react-hooks-global-state.svg) - React 的簡單全局狀態與 Hooks API 沒有上下文 API。[!\[開源軟件\]\[OSS圖標\]](https://github.com/dai-shi/react-hooks-global-state) * [重新匹配](https://github.com/rematch/rematch) ![](https:/img.shields.io/github/stars/rematch/rematch.%20svg) - 使用狀態圖進行狀態管理.. [!\[Open-Source Software\]\[OSS Icon\]](https://github.com/rematch/rematch) * [Unistore](https://github.com/developit/unistore) ![](https:/img.shields.io/github/stars/developit/unistore.%20svg) - 350b/650b 狀態容器，帶有用於 Preact 和 React 的組件操作。[!\[開源軟件\]\[OSS圖標\]](https://github.com/developit/unistore) * [unstated-next](https://jotai.pmnd.rs) ![](https:/img.shields.io/github/stars/jamiebuilds/unstated%20-next.svg) - 200 字節，不再考慮 React 狀態管理庫。[!\[開源軟件\]\[OSS圖標\]](https://github.com/jamiebuilds/unstated-next) * [useStateMachine](https://github.com/cassiozen/useStateMachine) ![](https:/img.shields.io/github/stars/cassiozen/useStateMachine.%20svg) - React 的 ½ kb 狀態機鉤子。[!\[開源軟件\]\[OSS圖標\]](https://github.com/cassiozen/useStateMachine) * [Valtio](http://valtio-demo.pmnd.rs) ![](https:/img.shields.io/github/stars/pmndrs/valtio%20.svg) - Valtio 使 React 和 Vanilla 的代理狀態變得簡單。[!\[開源軟件\]\[OSS圖標\]](https://github.com/pmndrs/valtio) * [zustand](https://zustand.surge.sh) ![](https:/img.shields.io/github/stars/pmndrs/zustand.svg%20) - 承擔 React 中狀態管理的必需品。[!\[開源軟件\]\[OSS圖標\]](https://github.com/pmndrs/zustand) ### Web 組件 ＃＃＃ 組件 * [amp](https://amp.dev) ![](https:/img.shields.io/github/stars/ampproject/amphtml.svg) - AMP Web 組件框架。[!\[開源軟件\]\[OSS圖標\]](https://github.com/ampproject/amphtml) * [螺栓](https://github.com/boltdesignsystem/bolt) ![](https:/img.shields.io/github/stars/boltdesignsystem/bolt.%20svg) Bolt 設計系統提供了強大的 Twig 和 Web 組件。[!\[開源軟件\]\[OSS圖標\]](https://github.com/boltdesignsystem/bolt) * [清晰度](http://clarity.design) ![](https://img.shields.io/github/stars/vmware/clarity.svg?label=) - Clarity 是一個開源設計系統，它將 UX 指南、設計資源和編碼實現與 Web 組件結合在一起。[!\[開源軟件\]\[OSS圖標\]](https://github.com/vmware/clarity) * [材質網](https://material-components.github.io/material-web/demos/) ![](https:/img.shields.io/%20github/stars/material-components/material-web.svg) - Material Design Web 組件。[!\[開源軟件\]\[OSS圖標\]](https://github.com/material-components/material-web) * [快速](https://fast.design) ![](https://img.shields.io/github/stars/microsoft/fast.svg?label=) - 現代網絡體驗的自適應界面系統。[!\[開源軟件\]\[OSS圖標\]](https://github.com/microsoft/fast) * [獅子](https://lion-web.netlify.app) ![](https:/img.shields.io/github/stars/gabrielbull/ing%20-bank/lion.svg) - 設計系統的基本白標 Web 組件功能.. \[!\[Open-Source Software]\[OSS Icon]]\( /獅子） * [鞋帶](https://shoelace.style) ![](https:/img.shields.io/github/stars/shoelace-style/shoelace.svg%20) - 一組專業設計的、基於與框架無關的技術構建的日常 UI 組件。[!\[開源軟件\]\[OSS圖標\]](https://github.com/shoelace-style/shoelace) * [UI5 Web 組件](https://sap.github.io/ui5-webcomponents/) ![](https:/img.shields.io/github/stars%20/SAP/ui5-webcomponents.svg) - 原生 API 之上的企業級糖。[!\[開源軟件\]\[OSS圖標\]](https://github.com/SAP/ui5-webcomponents) * [有線元素](https://wiredjs.com) ![](https:/img.shields.io/github/stars/rough-stuff/wired-%20elements.svg) - 出現手繪的自定義元素的集合。非常適合線框或有趣的外觀。[!\[開源軟件\]\[OSS圖標\]](https://github.com/rough-stuff/wired-elements) * [xy-ui](https://xy-ui.codelabo.cn/docs) ![](https:/img.shields.io/github/stars/%20XboxYan/xy-ui.svg) - 給未來的Java組件UI組件庫[!\[Open-Source Software\]\[OSS Icon\]](https://github.com/XboxYan/xy) ＃＃＃ 工具 * [Corpuscule](https://corpusculejs.github.io/corpuscule) ![](https:/img.shields.io/github/stars/corpusculejs/corpuscule.%20svg) - 基於裝飾器的小型 Web 組件框架。[!\[開源軟件\]\[OSS圖標\]](https://github.com/corpusculejs/corpuscule) * [DNA](https://www.chialab.io/p/dna) ![](https:/img.shields.io/github/stars/chialab/%20dna.svg) - 漸進式 Web 組件庫。[!\[開源軟件\]\[OSS圖標\]](https://github.com/chialab/dna) * [jsx-for-web-components](https://github.com/slogsdon/jsx-for-web-components) ![](https://github.com/tentenco/awesome/blob/main/devops/awesome-uikit/https:/img.%20shields.io/github/stars/slogsdon/jsx-for-web-components.svg) - 一個基本的 JSX 工廠，用於利用 Web 組件的項目。[!\[開源軟件\]\[OSS圖標\]](https://github.com/slogsdon/jsx-for-web-components) * [LWC](https://lwc.dev) ![](https:/img.shields.io/github/stars/salesforce/lwc.svg) - 超快的企業級 Web 組件基礎。[!\[開源軟件\]\[OSS圖標\]](https://github.com/salesforce/lwc) * [點燃](https://lit.dev) ![](https:/img.shields.io/github/stars/lit/lit.svg) - Lit 是一個簡單的庫，用於構建快速、輕量級的 Web 組件。[!\[開源軟件\]\[OSS圖標\]](https://github.com/lit/lit) * [面板](https://github.com/mixpanel/panel) ![](https:/img.shields.io/github/stars/mixpanel/panel%E3%80%82%20svg) - Web 組件 + 虛擬 DOM：強大 UI 的 Web 標準。[!\[開源軟件\]\[OSS圖標\]](https://github.com/mixpanel/panel) * [模板](https://stenciljs.com) ![](https:/img.shields.io/github/stars/ionic-team/stencil.svg%20) - 用於在 TypeScript 和 Web 組件標準之上構建可擴展、企業級組件系統的工具鏈。[!\[開源軟件\]\[OSS圖標\]](https://github.com/ionic-team/stencil) * [滑板](http://skatejs.netlify.com) ![](https:/img.shields.io/github/stars/skatejs/skatejs.svg%20) - 由現代視圖庫提供支持的輕鬆自定義元素。[!\[開源軟件\]\[OSS圖標\]](https://github.com/skatejs/skatejs) * [slim.js](https://slimjs.com) ![](https:/img.shields.io/github/stars/slimjs/slim.js%20.svg) - 基於現代標準的快速且強大的前端微框架。[!\[開源軟件\]\[OSS圖標\]](https://github.com/slimjs/slim.js) * [補品](https://tonicframework.dev) ![](https:/img.shields.io/github/stars/socketsupply/tonic.svg) - 一個低調的組件框架 - 穩定、最小、易於審計、零依賴和無構建工具。[!\[開源軟件\]\[OSS圖標\]](https://github.com/socketsupply/tonic) ### UI 組件 #### 反應 [![](https://github.com/tentenco/awesome/blob/main/devops/awesome-uikit/assets/react.svg)](https://github.com/facebook/react) *\[React]\(https\:// /github.com/facebook/react) 基於組件庫。* * [uiw](http://uiwjs.github.io) ![](https:/img.shields.io/github/stars/uiwjs/uiw.svg%20) - 一個高質量的 UI 工具包，一個 React 組件庫。[!\[開源軟件\]\[OSS圖標\]](https://github.com/uiwjs/uiw) * [AgnosticUI](https://www.agnosticui.com) ![](https:/img.shields.io/github/stars/agnosticui/agnosticui.svg%20) - 適用於 React、Vue 3、Svelte 和 Angular 的可訪問組件基元 [!\[Open-Source Software\]\[OSS Icon\]](https://github.com/agnosticui/agnosticui) * [ANT DESIGN](https://ant.design/index-cn) ![](https:/img.shields.io/github/stars/ant-design%20/ant-design.svg) - 一種 UI 設計語言。[!\[開源軟件\]\[OSS圖標\]](https://github.com/ant-design/ant-design) * [Arco 設計](https://arco.design) ![](https:/img.shields.io/github/stars/arco-design/arco-%20design.svg) - 一個全面的 React UI 組件庫。[!\[開源軟件\]\[OSS圖標\]](https://github.com/arco-design/arco-design) * [Atlassian UI](https://atlaskit.atlassian.com) Atlassian 的官方 UI 庫，根據 Atlassian 設計指南構建。[!\[開源軟件\]\[OSS圖標\]](https://bitbucket.org/atlassian/atlaskit-mk-2) * [Amaze UI React](http://amazeui.org/react/) ![](https:/img.shields.io/github/stars/amazeui/amazeui%20-react.svg) - 使用 React.js 構建的 Amaze UI 組件。[!\[開源軟件\]\[OSS圖標\]](https://github.com/amazeui/amazeui-react) * [Arwes](https://arwes.dev) ![](https://img.shields.io/github/stars/arwesjs/arwes.svg?label=) - 用於 Web 應用程序的未來科幻和賽博朋克圖形用戶界面框架。[!\[開源軟件\]\[OSS圖標\]](https://github.com/arwesjs/arwes) * [背包](https://backpack.github.io) ![](https:/img.shields.io/github/stars/Skyscanner/backpack.svg) - 背包設計系統。[!\[開源軟件\]\[OSS圖標\]](https://github.com/Skyscanner/backpack) * [基礎 UI](https://baseweb.design) ![](https:/img.shields.io/github/stars/uber-web/baseui.svg%20) - 基礎 Web React 組件。[!\[開源軟件\]\[OSS圖標\]](https://github.com/uber-web/baseui) * [藍圖](http://blueprintjs.com) ![](https:/img.shields.io/github/stars/palantir/blueprint.svg) - Blueprint 是一個基於 React 的 Web UI 工具包。[!\[開源軟件\]\[OSS圖標\]](https://github.com/palantir/blueprint) * [綻放](https://bloom.appearhere.co.uk) ![](https:/img.shields.io/github/stars/appearhere/bloom%20.svg) - Bloom 充當可重用 React 組件的中央存儲庫。[!\[開源軟件\]\[OSS圖標\]](https://github.com/appearhere/bloom) * [美女](http://nikgraf.github.io/belle/) ![](https:/img.shields.io/github/stars/nikgraf/belle%20.svg) - 具有出色 UX 的可配置 React 組件。[!\[開源軟件\]\[OSS圖標\]](https://github.com/nikgraf/belle) * [藍色](https://github.com/helpscout/blue) ![](https:/img.shields.io/github/stars/helpscout/blue%E3%80%82%20svg) - 為企業應用而生的 React UI 組件套件。[!\[開源軟件\]\[OSS圖標\]](https://github.com/helpscout/blue) * [Buttercup UI](https://buttercup.pw) ![](https:/img.shields.io/github/stars/buttercup/ui.svg) - 在 Buttercup 產品中使用的 React UI 組件。[!\[開源軟件\]\[OSS圖標\]](https://github.com/buttercup/ui) * [碳](http://react.carbondesignsystem.com) ![](https:/img.shields.io/github/stars/IBM/carbon-components-%20react.svg) - 根據 IBM 的 React 組件。[!\[開源軟件\]\[OSS圖標\]](https://github.com/IBM/carbon-components-react) * [脈輪](https://chakra-ui.com) ![](https:/img.shields.io/github/stars/chakra-ui/chakra-%20ui.svg) - 用於 React 應用程序的簡單、模塊化和可訪問的 UI 組件。[!\[開源軟件\]\[OSS圖標\]](https://github.com/chakra-ui/chakra-ui) * [ChatUI](https://chatui.io) ![](https:/img.shields.io/github/stars/alibaba/ChatUI.svg) - 對話式 UI 的 UI 設計語言和 React 庫。[!\[開源軟件\]\[OSS圖標\]](https://github.com/alibaba/ChatUI) * [cloud-react](https://cloud-react.shuyun.com) ![](https:/img.shields.io/github/stars/ShuyunFF2E/%20cloud-react.svg) - 數雲PC端react基礎組件。 [!\[開源軟件\]\[OSS圖標\]](https://github.com/ShuyunFF2E/cloud-react) * [設計塊](https://www.froala.com/design-blocks) ![](https:/img.shields.io/github/stars/%20froala/react-froala-design-blocks.svg) - Froala 設計塊的 React 實現。[!\[開源軟件\]\[OSS圖標\]](https://github.com/froala/react-froala-design-blocks) * [常青樹](https://segmentio.github.io/evergreen/) ![](https:/img.shields.io/github/stars/segmentio/evergreen%20.svg) -Evergreen React UI 框架，按分段。[!\[開源軟件\]\[OSS圖標\]](https://github.com/segmentio/evergreen) * [EBS 設計系統](https://github.com/ebs-integrator/ebs-design) ![](https:/img.shields.io/github/%20stars/ebs-integrator/ebs-design.svg) - 用於企業級應用程序的基於 React 的 UI 工具包。[!\[開源軟件\]\[OSS圖標\]](https://github.com/ebs-integrator/ebs-design) * [元素反應](https://elemefe.github.io/element-react/) ![](https:/img.shields.io/github/stars/%20ElemeFE/element-react.svg) - 用 React 編寫的基本 UI 組件的集合。[!\[開源軟件\]\[OSS圖標\]](https://github.com/ElemeFE/element-react) * [ExtReact](https://www.sencha.com/products/extreact/) ![](https:/img.shields.io/github/stars/sencha%20/ext-react.svg) - 在 React 中使用 Ext JS 組件。[!\[開源軟件\]\[OSS圖標\]](https://github.com/sencha/ext-react) * [Fannypack](https://fannypack.style) ![](https://img.shields.io/github/stars/fannypackui/fannypack.svg?label=) - 使用 Reakit 構建的友好、可主題化、可訪問的 React UI 工具包。[!\[開源軟件\]\[OSS圖標\]](https://github.com/fannypackui/fannypack) * [基礎](https://react.foundation) ![](https:/img.shields.io/github/stars/nordsoftware/react-foundation.svg) - 基礎作為 React 組件。[!\[開源軟件\]\[OSS圖標\]](https://github.com/nordsoftware/react-foundation) * [Fyndiq UI](https://fyndiq.github.io/fyndiq-ui) ![](https:/img.shields.io/github/stars/fyndiq%20/fyndiq-ui.svg) -Fyndiq 的可重用組件庫。[!\[開源軟件\]\[OSS圖標\]](https://github.com/fyndiq/fyndiq-ui) * [融合設計](https://fusion.design) ![](https:/img.shields.io/github/stars/alibaba-fusion/next.%20svg) - 基於 React 的可配置 Web 組件庫。[!\[開源軟件\]\[OSS圖標\]](https://github.com/alibaba-fusion/next) * [元素 UI](http://elemental-ui.com) ![](https:/img.shields.io/github/stars/elementalui/elemental.svg%20) - React.js 的靈活美觀的 UI 框架。[!\[開源軟件\]\[OSS圖標\]](https://github.com/elementalui/elemental) * [花園](https://garden.zendesk.com/react-components/) ![](https:/img.shields.io/github/stars/zendeskgarden%20/react-components.svg) - 基於花園 css 的花園 React 組件。[!\[開源軟件\]\[OSS圖標\]](https://github.com/zendeskgarden/react-components) * [Geist UI](https://react.geist-ui.dev) ![](https:/img.shields.io/github/stars/geist-%20org/react.svg) - 現代簡約的 React UI 庫。[!\[開源軟件\]\[OSS圖標\]](https://github.com/geist-org/react) * [格式塔](https://pinterest.github.io/gestalt/) ![](https:/img.shields.io/github/stars/pinterest/gestalt%20.svg) - 一組支持 Pinterest 設計語言的 React UI 組件。[!\[開源軟件\]\[OSS圖標\]](https://github.com/pinterest/gestalt) * [govuk-react](https://github.com/govuk-react/govuk-react/) ![](https:/img.shields.io/github%20/stars/govuk-react/govuk-react.svg) - 使用 CSSinJS 在 React 中實現 GOV.UK 設計系統。[!\[開源軟件\]\[OSS圖標\]](https://github.com/govuk-react/govuk-react) * [索環](https://v2.grommet.io) ![](https:/img.shields.io/github/stars/grommet/grommet.svg) - 專注於基本體驗。[!\[開源軟件\]\[OSS圖標\]](https://github.com/grommet/grommet) * [黑客俱樂部設計系統](https://design.hackclub.com) ![](https:/img.shields.io/github/stars/hackclub/design%20-system.svg) - 具有 nijigen 風格的反應 UIKit。[!\[開源軟件\]\[OSS圖標\]](https://github.com/hackclub/design-system) * [hana-ui](https://hana-ui.moe) ![](https:/img.shields.io/github/stars/hana-group/%20hana-ui.svg) - 具有 nijigen 風格的反應 UIKit。[!\[開源軟件\]\[OSS圖標\]](https://github.com/hana-group/hana-ui) * [HIUI](https://xiaomi.github.io/hiui/) ![](https:/img.shields.io/github/stars/XiaoMi/hiui%20.svg) 這是一個足以製定和實現前、中、後端交互和UI設計標準的解決方案。[!\[開源軟件\]\[OSS圖標\]](https://github.com/XiaoMi/hiui) * [結構 UI​​](https://instructure.design) ![](https:/img.shields.io/github/stars/instructure/instructure-ui%E3%80%82%20svg) - Instructure, Inc. 製作的 UI 組件庫 [!\[Open-Source Software\]\[OSS Icon\]](https://github.com/instructure/instructure-ui) * [ICE DISIGN](https://alibaba.github.io/ice/) ![](https:/img.shields.io/github/stars/alibaba/%20ice.svg) - 海量可多種物料速遞，通過 GUI 工具極製造中的後台應用。[!\[開源軟件\]\[OSS圖標\]](https://github.com/alibaba/ice) * [Klarna UI](https://klarna.github.io/ui/) ![](https:/img.shields.io/github/stars/klarna/%20ui.svg) - Klarna 的 UI 組件庫。[!\[開源軟件\]\[OSS圖標\]](https://github.com/klarna/ui) * [KhanAcademy React](http://khan.github.io/react-components/) ![](https:/img.shields.io/github/stars/%20Khan/react-components.svg) - Klarna 的 UI 組件庫。[!\[開源軟件\]\[OSS圖標\]](https://github.com/Khan/react-components) * [Lodgify](https://lodgify.github.io/lodgify-ui/) ![](https:/img.shields.io/github/stars/lodgify%20/lodgify-ui.svg) - 使用 Lodgify 構建令人驚嘆的網站的 React 組件。[!\[開源軟件\]\[OSS圖標\]](https://github.com/lodgify/lodgify-ui) * [材質-UI](http://www.material-ui.com/#/) ![](https:/img.shields.io/github/stars%20/callemall/material-ui.svg) - 實現 Google 的 Material Design 的 React 組件。[!\[開源軟件\]\[OSS圖標\]](https://github.com/callemall/material-ui) * [模塊 UI](https://brcportal2.github.io/modul-ui/) ![](https:/img.shields.io/github/stars/%20brcportal2/modul-ui.svg) - 模塊化 UI React 組件。[!\[開源軟件\]\[OSS圖標\]](https://github.com/brcportal2/modul-ui) * [MDBootstrap](https://mdbootstrap.com/docs/react/) ![](https:/img.shields.io/github/stars/mdbootstrap/React%20-Bootstrap-with-Material-Design.svg) - 使用 Material Design 反應 Bootstrap。[!\[開源軟件\]\[OSS圖標\]](https://github.com/mdbootstrap/React-Bootstrap-with-Material-Design) * [Mantine](https://mantine.dev) ![](https:/img.shields.io/github/stars/mantinedev/mantine.svg) - 具有原生深色主題支持的 React 組件庫。[!\[開源軟件\]\[OSS圖標\]](https://github.com/mantinedev/mantine) * [nice-react](https://nice.textkernel.nl/react/) ![](https:/img.shields.io/github/stars/textkernel%20/nice-react.svg) - React Bootstrap 與 Material Design。[!\[開源軟件\]\[OSS圖標\]](https://github.com/textkernel/nice-react) * [Office UI Fabric](https://developer.microsoft.com/en-us/fabric) ![](https:/img.shields.io/github/%20stars/OfficeDev/office-ui-fabric-react.svg) - 用於構建 Office 和 Office 365 體驗的 React 組件。\[!\[開源軟件]\[OSS 圖標]]\( .com/OfficeDev/office-ui-fabric-react) * [軌道](https://orbit.kiwi) ![](https:/img.shields.io/github/stars/kiwicom/orbit-components.svg%20) - Kiwi.com 的 Orbit 組件的公共存儲庫。[!\[開源軟件\]\[OSS圖標\]](https://github.com/kiwicom/orbit-components) * [oneui](https://open-ui.org) ![](https:/img.shields.io/github/stars/textkernel/oneui.svg%20) - 可重用 UI 組件的 Textkernel OneUI 庫。[!\[開源軟件\]\[OSS圖標\]](https://github.com/textkernel/oneui) * [打開 UI](https://textkernel.github.io/oneui/) ![](https:/img.shields.io/github/stars/openui/%20open-ui.svg) - 可重用 UI 組件的 Textkernel OneUI 庫。[!\[開源軟件\]\[OSS圖標\]](https://github.com/openui/open-ui) * [PatternFly React](https://www.patternfly.org) ![](https:/img.shields.io/github/stars/patternfly/patternfly-%20react.svg) - PatternFly 項目的一組 React 組件。[!\[開源軟件\]\[OSS圖標\]](https://github.com/patternfly/patternfly-react) * [Polaris React](https://polaris.shopify.com) ![](https:/img.shields.io/github/stars/Shopify/polaris.svg%20) - Shopify 的產品組件庫。[!\[開源軟件\]\[OSS圖標\]](https://github.com/Shopify/polaris) * [Pivotal UI](https://styleguide.pivotal.io) ![](https:/img.shields.io/github/stars/pivotal-cf/%20pivotal-ui.svg) - Pivotal UI 是一組為 Pivotal 品牌設計的 React 組件。[!\[開源軟件\]\[OSS圖標\]](https://github.com/pivotal-cf/pivotal-ui) * [Prime React](https://www.primefaces.org/primereact) ![](https:/img.shields.io/github/stars/primefaces/primereact%20.svg) - 是 React 豐富的 UI 組件的集合。[!\[開源軟件\]\[OSS圖標\]](https://github.com/primefaces/primereact) * [底漆](https://primer.style) ![](https:/img.shields.io/github/stars/primer/components.svg) - 入門 React 組件。[!\[開源軟件\]\[OSS圖標\]](https://github.com/primer/components) * [精確用戶界面](https://precise-ui.io) ![](https:/img.shields.io/github/stars/ZEISS/precise-%20ui.svg) - 由蔡司提供支持的 React UI 組件庫。[!\[開源軟件\]\[OSS圖標\]](https://github.com/ZEISS/precise-ui) * [rbx](https://dfee.github.io/rbx/) ![](https:/img.shields.io/github/stars/dfee/rbx%20.svg) - React 的綜合 Bulma UI 框架。[!\[開源軟件\]\[OSS圖標\]](https://github.com/dfee/rbx) * [reactjs-components](http://mesosphere.github.io/reactjs-components/) ![](https:/img.shields.io/github/stars%20/dfee/rbx.svg) - 可重用的 React 組件庫。[!\[開源軟件\]\[OSS圖標\]](https://github.com/mesosphere/reactjs-components) * [reactstrap](https://reactstrap.github.io) ![](https:/img.shields.io/github/stars/reactstrap/reactstrap.svg%20) - 簡單的 React Bootstrap 4 組件。[!\[開源軟件\]\[OSS圖標\]](https://github.com/reactstrap/reactstrap) * [Reakit](https://reakit.io) ![](https:/img.shields.io/github/stars/reakit/reakit.svg) - 使用 React 構建真正交互式 UI 的工具包。[!\[開源軟件\]\[OSS圖標\]](https://github.com/reakit/rekit) * [React95](https://react95.github.io/React95/) ![](https:/img.shields.io/github/stars/React95/React95%20.svg) - 帶有 Win95 UI 的 React 組件庫。[!\[開源軟件\]\[OSS圖標\]](https://github.com/React95/React95) * [RSUITE](https://rsuitejs.com) ![](https:/img.shields.io/github/stars/rsuite/rsuite.svg) - 一套 React 組件。[!\[開源軟件\]\[OSS圖標\]](https://github.com/rsuite/rsuite) * [反應光譜](https://react-spectrum.adobe.com/react-spectrum/) ![](https:/img.shields.io/github/%20stars/adobe/react-spectrum.svg) - 幫助您構建自適應、可訪問和強大的用戶體驗的庫和工具的集合。來自 Adob​​e。[!\[開源軟件\]\[OSS圖標\]](https://github.com/adobe/react-spectrum) * [基元](https://www.radix-ui.com) ![](https:/img.shields.io/github/stars/radix-%20ui/primitives.svg) - 一個開源 UI 組件庫，用於構建高質量、可訪問的設計系統和 Web 應用程序。[!\[開源軟件\]\[OSS圖標\]](https://github.com/radix-ui/primitives) * [React Material Web 組件](https://jamesmfriedman.github.io/rmwc/) ![](https:/img.shields.io/github/stars/%20jamesmfriedman/rmwc.svg) - JetBrains Web UI 組件的集合。[!\[開源軟件\]\[OSS圖標\]](https://github.com/jamesmfriedman/rmwc) * [環 UI](https://jetbrains.org/ring-ui/index.html) ![](https:/img.shields.io/github/stars%20/JetBrains/ring-ui.svg) - JetBrains Web UI 組件的集合。[!\[開源軟件\]\[OSS圖標\]](https://github.com/JetBrains/ring-ui) * [反應 UI](http://lobos.github.io/react-ui/) ![](https:/img.shields.io/github/stars/%20Lobos/react-ui.svg) - React 組件，基於 bootstrap 4.0。[!\[開源軟件\]\[OSS圖標\]](https://github.com/Lobos/react-ui) * [React-Bootstrap](https://react-bootstrap.github.io) ![](https:/img.shields.io/github/stars/react%20-bootstrap/react-bootstrap.svg) - 最流行的前端框架，為 React 重建。[!\[開源軟件\]\[OSS圖標\]](https://github.com/react-bootstrap/react-bootstrap) * [重啟 UI](https://react-restart.github.io/ui/) ![](https:/img.shields.io/github/stars/%20react-restart/ui.svg) - 一組功能齊全、可擴展且可訪問的 UI 組件，旨在集成到任何樣式框架或系統中。[!\[開源軟件\]\[OSS圖標\]](https://github.com/react-restart/ui) * [反應引導](https://reactstrap.github.io) ![](https:/img.shields.io/github/stars/reactstrap/reactstrap.svg%20) - 簡單的 React Bootstrap 4 組件。[!\[開源軟件\]\[OSS圖標\]](https://github.com/reactstrap/reactstrap) * [React 桌面](http://reactdesktop.js.org) ![](https:/img.shields.io/github/stars/gabrielbull/react-desktop%20.svg) - 適用於 macOS High Sierra 和 Windows 10 的 React UI 組件。[!\[Open-Source Software\]\[OSS Icon\]](https://github.com/gabrielbull/react-desktop) * [react-materialize](https://react-materialize.github.io) ![](https:/img.shields.io/github/stars/react-%20materialize/react-materialize.svg) - 反應的材料設計，由 materializecss 提供支持。[!\[開源軟件\]\[OSS圖標\]](https://github.com/react-materialize/react-materialize) * [React-md](https://react-md.mlaursen.com) ![](https:/img.shields.io/github/stars/mlaursen/%20react-md.svg) - React Material Design - 使用 sass 構建的 React 組件。[!\[開源軟件\]\[OSS圖標\]](https://github.com/mlaursen/react-md) * [反應離子](http://reactionic.github.io) ![](https:/img.shields.io/github/stars/reactionic/reactionic%20.svg) - React Ionic：我們正在尋找新的維護者！[!\[開源軟件\]\[OSS圖標\]](https://github.com/reactionic/reactionic) * [React 響應式 UI](https://catamphetamine.github.io/react-responsive-ui) ![](https:/img.shields.io/github/%20stars/catamphetamine/react-responsive-ui.svg) - 響應式 React UI 組件！[!\[開源軟件\]\[OSS圖標\]](https://github.com/catamphetamine/react-responsive-ui) * [React-WeUI](https://weui.github.io/react-weui/docs/) ![](https:/img.shields.io/github%20/stars/weui/react-weui.svg) - 使用 React 編寫的基本 UI 組件的集合。[!\[開源軟件\]\[OSS圖標\]](https://github.com/weui/react-weui/) * [React-UWP](https://www.react-uwp.com) ![](https:/img.shields.io/github/stars/reactionic/%20reactic.svg) - 實現微軟 UWP 設計和流暢設計的 React 組件。[!\[開源軟件\]\[OSS圖標\]](https://github.com/reactionic/reactionic) * [React 工具箱](http://react-toolbox.io) ![](https:/img.shields.io/github/stars/react-toolbox/react%20-toolbox.svg) - 是一組實現 Google 的 Material Design 規範的 React 組件。[!\[開源軟件\]\[OSS圖標\]](https://github.com/react-toolbox/react-toolbox) * [Reach UI](https://ui.reach.tech) ![](https:/img.shields.io/github/stars/reach/reach-ui%20.svg) - React 應用程序和設計系統的無障礙基礎。[!\[開源軟件\]\[OSS圖標\]](https://github.com/reach/reach-ui) * [編輯](https://balena-io-modules.github.io/rendition/) ![](https:/img.shields.io/github/stars%20/balena-io-modules/rendition.svg) - React UI 組件庫。[!\[開源軟件\]\[OSS圖標\]](https://github.com/balena-io-modules/rendition) * [Rebass](https://rebassjs.org) ![](https:/img.shields.io/github/stars/rebassjs/rebass.svg) - 功能性 React UI 組件庫，使用 styled-components 構建。[!\[開源軟件\]\[OSS圖標\]](https://github.com/rebassjs/rebass) * [react-uikit-components](http://kbuechl.github.io/react-uikit-components/) ![](https://github.com/tentenco/awesome/blob/main/devops/awesome-uikit/https:/img.shields.io%20/github/stars/kbuechl/react-uikit-components.svg) - 用於 UIKit CSS 框架的 React UIkit 組件。[!\[開源軟件\]\[OSS圖標\]](https://github.com/kbuechl/react-uikit-components) * [Sancho UI](https://sancho-ui.com) ![](https:/img.shields.io/github/stars/bmcmahen/sancho.%20svg) - 可主題化的 React 組件庫。[!\[開源軟件\]\[OSS圖標\]](https://github.com/bmcmahen/sancho) * [星塵界面](https://stardust-ui.github.io/react/) ![](https:/img.shields.io/github/stars/%20stardust-ui/react.svg) - 可主題化的 React 組件庫。[!\[開源軟件\]\[OSS圖標\]](https://github.com/stardust-ui/react) * [Shineout](https://sheinsight.github.io/shineout) ![](https:/img.shields.io/github/stars/sheinsight/shineout%E3%80%82%20svg) - React 的組件庫。[!\[開源軟件\]\[OSS圖標\]](https://github.com/sheinsight/shineout) * [語義 UI](https://react.semantic-ui.com) ![](https:/img.shields.io/github/stars/Semantic-Org%20/Semantic-UI-React.svg) - 官方 Semantic-UI-React 集成。[!\[開源軟件\]\[OSS圖標\]](https://github.com/Semantic-Org/Semantic-UI-React) * [平滑 UI](https://smooth-ui.smooth-code.com) ![](https:/img.shields.io/github/stars/%20smooth-code/smooth-ui.svg) - 現代 React UI 庫。少寫代碼，多做事。[!\[開源軟件\]\[OSS圖標\]](https://github.com/smooth-code/smooth-ui) * [智能反應組件](https://cevadtokatli.github.io/smart-react-components/) ![](https:/img.shields.io/github%20/stars/cevadtokatli/smart-react-components.svg) - 用於樣式化組件的 React UI 庫。[!\[開源軟件\]\[OSS圖標\]](https://github.com/cevadtokatli/smart-react-components) * [超級調度 UI](https://ui.superdispatch.org) ![](https:/img.shields.io/github/stars/superdispatch/web%20-ui.svg) - 網頁設計系統。[!\[開源軟件\]\[OSS圖標\]](https://github.com/superdispatch/web-ui) * [UXCore](http://uxco.re) ![](https:/img.shields.io/github/stars/uxcore/uxcore.svg) - 適用於企業應用程序的 React UI 組件套件。[!\[開源軟件\]\[OSS圖標\]](https://github.com/uxcore/uxcore) * [tinper-bee](http://bee.tinper.org) ![](https:/img.shields.io/github/stars/iuap-design%20/tinper-bee.svg) 基於 UI 設計語言 iUAP Design 和 React 的組件庫。[!\[開源軟件\]\[OSS圖標\]](https://github.com/iuap-design/tinper-bee) * [Tenon-ui](https://tenon-ui.info) ![](https:/img.shields.io/github/stars/tenon-io%20/tenon-ui.svg) - Tenon 可訪問的 ui 組件庫。[!\[開源軟件\]\[OSS圖標\]](https://github.com/tenon-io/tenon-ui) * [主題 UI](https://theme-ui.com) ![](https:/img.shields.io/github/stars/system-ui/%20theme-ui.svg) - 基於基於約束的設計原則構建一致的、可主題化的 React 應用程序。[!\[開源軟件\]\[OSS圖標\]](https://github.com/system-ui/theme-ui) * [Tiny UI](https://tiny-ui.dev) ![](https:/img.shields.io/github/stars/wangdicoder/tiny-%20ui.svg) - 為 React.js 設置的友好 UI 組件 [!\[Open-Source Software\]\[OSS Icon\]](https://github.com/wangdicoder/tiny-ui) * [Yoshino-UI](https://yoshino-ui.github.io) ![](https:/img.shields.io/github/stars/Yoshino-%20UI/Yoshino.svg) - 一個基於 React 的可定制化的 pc 端組件庫。[!\[開源軟件\]\[OSS圖標\]](https://github.com/Yoshino-UI/Yoshino) * [Zent](https://www.youzanyun.com/zanui/zent) ![](https:/img.shields.io/github/stars/youzan/%20zent.svg) - 用 React 編寫的基本 UI 組件的集合。[!\[開源軟件\]\[OSS圖標\]](https://github.com/youzan/zent) * [零用戶界面](https://alphago88.github.io/Zero-UI/) ![](https:/img.shields.io/github/stars%20/AlphaGo88/Zero-UI.svg) - 一個易於使用的 Web UI 組件框架。[!\[開源軟件\]\[OSS圖標\]](https://github.com/AlphaGo88/Zero-UI) * [Zarm Web](https://zarm-web.netlify.com) ![](https:/img.shields.io/github/stars/JeromeLin/%20zarm-web.svg) - Web UI 組件框架。[!\[開源軟件\]\[OSS圖標\]](https://github.com/JeromeLin/zarm-web) * [zhui](https://zhui-team.github.io/zhui/) ![](https:/img.shields.io/github/stars/zhui%20-team/zhui.svg) - react 的中式組件庫。[!\[開源軟件\]\[OSS圖標\]](https://github.com/zhui-team/zhui) #### Vue [![](https://github.com/tentenco/awesome/blob/main/devops/awesome-uikit/assets/vue.svg)](https://github.com/vuejs/vue) *\[Vue]\(https\:// /github.com/vuejs/vue) 基於組件庫。* * [Ant Design Vue](https://vuecomponent.github.io/ant-design-vue) ![](https:/img.shields.io/github/%20stars/vueComponent/ant-design-vue.svg) - VueJS 的碳設計。[!\[開源軟件\]\[OSS圖標\]](https://github.com/vueComponent/ant-design-vue) * [at-ui](https://at.aotu.io) ![](https:/img.shields.io/github/stars/AT-UI/%20at-ui.svg) - 一個清新扁平的 UI-Kit，專門用於桌面應用程序，由 ♥ 由 Vue.js 2.0 製作。[!\[開源軟件\]\[OSS圖標\]](https://github.com/AT-UI/at-ui) * [amaze-vue](https://smokingrabbit.github.io/amaze-vue/) ![](https:/img.shields.io/github/stars%20/SmokingRabbit/amaze-vue.svg) - 用於 Web 的 UI 工具包，Vue2.0 .\[!\[開源軟件]\[OSS 圖標]]\( vue) * [ATUI](https://aliqin.github.io/atui/) ![](https:/img.shields.io/github/stars/aliqin/atui%20.svg) - 適用於 Web 的 Vue.js 2.0 UI 工具包。[!\[開源軟件\]\[OSS圖標\]](https://github.com/aliqin/atui) * [Antue](https://zzuu666.github.io/antue/) ![](https:/img.shields.io/github/stars/zzuu666/antue%20.svg) - 一組企業級 Vue UI 組件。[!\[開源軟件\]\[OSS圖標\]](https://github.com/zzuu666/antue) * [bootstrap-vue](https://bootstrap-vue.github.io) ![](https:/img.shields.io/github/stars/bootstrap%20-vue/bootstrap-vue.svg) - Vue.js 2 \[bootstrap-4]\(http s\://getbootstrap.com/) 網格和組件的實現。 [!\[開源軟件\] \[OSS 圖標\]](https://github.com/bootstrap-vue/bootstrap-vue) * [Buefy](https://buefy.org) ![](https:/img.shields.io/github/stars/buefy/buefy.svg) - Vuejs 2.0 的 Material Design UI 庫。[!\[開源軟件\]\[OSS圖標\]](https://github.com/buefy/buefy) * [BalmUI](https://material.balmjs.com) ![](https:/img.shields.io/github/stars/balmjs/ui-vue%20.svg) - Vue.js 的下一代 Material UI。[!\[開源軟件\]\[OSS圖標\]](https://github.com/balmjs/ui-vue) * [Carvue.js](https://carvuejs.github.io) ![](https:/img.shields.io/github/stars/CarvueJS/carbon%20-components-vue.svg) - VueJS 的碳設計。[!\[開源軟件\]\[OSS圖標\]](https://github.com/CarvueJS/carbon-components-vue) * [DaisyUI](https://daisyui.com) ![](https:/img.shields.io/github/stars/saadeghi/daisyui.svg) - 將 btn、card 等組件類添加到 Tailwind CSS。[!\[開源軟件\]\[OSS圖標\]](https://github.com/saadeghi/daisyui) * [元素](http://element.eleme.io) ![](https:/img.shields.io/github/stars/ElemeFE/element.svg%20) - 適用於 Web 的 Vue.js 2.0 UI 工具包。[!\[開源軟件\]\[OSS圖標\]](https://github.com/ElemeFE/element) * [元素加](https://element-plus.org) ![](https:/img.shields.io/github/stars/element-plus/%20element-plus.svg) - 一個 Vue.js 3 UI 庫。[!\[開源軟件\]\[OSS圖標\]](https://github.com/element-plus/element-plus) * [企業用戶界面](https://ecomfe.github.io/veui/components/) ![](https:/img.shields.io/github/stars/%20ecomfe/veui.svg) - Vue.js 的企業 UI。[!\[開源軟件\]\[OSS圖標\]](https://github.com/ecomfe/veui) * [fish-ui](https://myliang.github.io/fish-ui/) ![](https:/img.shields.io/github/stars%20/myliang/fish-ui.svg) - 適用於 Web 的 Vue.js 2.0 UI 工具包。[!\[開源軟件\]\[OSS圖標\]](https://github.com/myliang/fish-ui) * [gulu UI](https://frankfang.github.io/gulu/) ![](https:/img.shields.io/github/stars/FrankFang/%20gulu.svg) - 軲轆，給源碼閱讀者的 UI 框架。[!\[開源軟件\]\[OSS圖標\]](https://github.com/FrankFang/gulu) * [gitlab-ui](https://gitlab-org.gitlab.io/gitlab-ui) ![](https:/img.shields.io/npm/%20dm/@gitlab/ui) - GitLab UI 是一個 UI 組件庫，它實現了我們的設計系統 [Pajamas](https://design.gitlab.com)。[!\[開源軟件\]\[OSS圖標\]](https://gitlab.com/gitlab-org/gitlab-ui) * [HeyUI](http://www.heyui.top) ![](https:/img.shields.io/github/stars/heyui/heyui.svg%20) - 用於 Web 的 UI 工具包，Vue2.0 。[!\[開源軟件\]\[OSS圖標\]](https://github.com/heyui/heyui) * [iView](https://www.iviewui.com) ![](https:/img.shields.io/github/stars/iview/iview.svg%20) - 基於 Vue.js 的高質量 UI 工具包。[!\[開源軟件\]\[OSS圖標\]](https://github.com/iview/iview) * [jsmod-pc-vue](https://github.com/chaogao/jsmod-pc-vue) ![](https:/img.shields.io/%20github/stars/chaogao/jsmod-pc-vue.svg) - 高可擴展性 && 自由的 vue ui 組件。[!\[開源軟件\]\[OSS圖標\]](https://github.com/chaogao/jsmod-pc-vue) * [muse-ui](https://museui.github.io) ![](https:/img.shields.io/github/stars/museui/muse-%20ui.svg) - Vuejs 2.0 的 Material Design UI 庫。[!\[開源軟件\]\[OSS圖標\]](https://github.com/museui/muse-ui) * [材質組件 Vue](https://matsp.github.io/material-components-vue/) ![](https:/img.shields.io/github%20/stars/matsp/material-components-vue.svg) - Vue.js 的材料設計組件。[!\[開源軟件\]\[OSS圖標\]](https://github.com/matsp/material-components-vue) * [N3-components](https://n3-components.github.io/N3-components/) ![](https:/img.shields.io/github%20/stars/N3-components/N3-components.svg) 強大的Vue UI庫。\[!\[開源軟件]\[OSS圖標]]\( -組件） * [Naive UI](https://www.naiveui.com) ![](https:/img.shields.io/github/stars/TuSimple/naive-%20ui.svg) 一個 Vue 3 組件庫。相當完整。可定制的主題。使用打字稿。[!\[開源軟件\]\[OSS圖標\]](https://github.com/TuSimple/naive-ui) * [owl-ui](https://owl-ui.dengwb.com) ![](https:/img.shields.io/github/stars/dengwb1991/%20owl-ui.svg) - 移動 UI 組件庫。[!\[開源軟件\]\[OSS圖標\]](https://github.com/dengwb1991/owl-ui) * [PrimeVue](https://github.com/sudheerj/primevue) ![](https:/img.shields.io/github/stars/sudheerj/primevue%E3%80%82%20svg) - Vue 的 UI 組件。[!\[開源軟件\]\[OSS圖標\]](https://github.com/sudheerj/primevue) * [Quasar 框架](http://quasar-framework.org) ![](https:/img.shields.io/github/stars/quasarframework/quasar.%20svg) - Vue.js 的材料組件框架 2. [!\[Open-Source Software\]\[OSS Icon\]](https://github.com/quasarframework/quasar) * [魔方用戶界面](https://ccforward.github.io/rubik/#/) ![](https:/img.shields.io/github/stars/%20ccforward/rubik.svg) - Material Design 風格的 Vue.js UI 組件庫。[!\[開源軟件\]\[OSS圖標\]](https://github.com/ccforward/rubik) * [語義 UI Vue](https://semantic-ui-vue.github.io/#/) ![](https:/img.shields.io/github%20/stars/Semantic-UI-Vue/Semantic-UI-Vue.svg) - Semantic UI Vue 是 Semantic UI 的 Vue 集成。[!\[開源軟件\]\[OSS圖標\]](https://github.com/Semantic-UI-Vue/Semantic-UI-Vue) * [用戶界面](https://vuejs.github.io/ui/) ![](https:/img.shields.io/github/stars/vuejs/ui%20.svg) - 官方 Vue 組織應用程序的 UI 組件。[!\[開源軟件\]\[OSS圖標\]](https://github.com/vuejs/ui) * [Uiv](https://uiv.wxsm.space) ![](https:/img.shields.io/github/stars/wxsms/uiv.svg%20) - 是 Vue 2 的 Bootstrap 3 組件庫.. [!\[Open-Source Software\]\[OSS Icon\]](https://github.com/wxsms/uiv) * [ui-vue-antd](https://aaronwn.github.io/vue-antd) ![](https:/img.shields.io/github/%20stars/Aaronwn/ui-vue-antd.svg) - 用 Vue 實現的 Antd 組件庫。[!\[開源軟件\]\[OSS圖標\]](https://github.com/Aaronwn/ui-vue-antd) * [vue-beauty](https://fe-driver.github.io/vue-beauty) ![](https:/img.shields.io/github/%20stars/FE-Driver/vue-beauty.svg) - 使用 vue 和 ant 設計構建的漂亮 UI 組件。[!\[開源軟件\]\[OSS圖標\]](https://github.com/FE-Driver/vue-beauty) * [vue-antd](https://vuecomponent.github.io/ant-design/docs/vue/introduce/) ![](https://github.com/tentenco/awesome/blob/main/devops/awesome-uikit/https:/img.shields%20.io/github/stars/vueComponent/ant-design.svg) - 基於 Ant Design 3.X 和 Vue 的企業級 UI 組件。[!\[開源軟件\]\[OSS圖標\]](https://github.com/vueComponent/ant-design) * [vue-material](http://vuematerial.io) ![](https:/img.shields.io/github/stars/vuematerial/vue-material.%20svg) - Vue.js 的材料設計。[!\[開源軟件\]\[OSS圖標\]](https://github.com/vuematerial/vue-material) * [vuesax](https://lusaxweb.github.io/vuesax/) ![](https:/img.shields.io/github/stars/lusaxweb/vuesax%20.svg) - Vuesax 前端 Vue 組件。[!\[開源軟件\]\[OSS圖標\]](https://github.com/lusaxweb/vuesax) * [vuetify](https://vuetifyjs.com) ![](https://img.shields.io/github/stars/vuetifyjs/vuetify.svg?label=) - Vue.js 的 Material 組件框架 2. [!\[Open-Source Software\]\[OSS Icon\]](https://github.com/vuetifyjs/vuetify) * [Vuikit](https://vuikit.js.org) ![](https:/img.shields.io/github/stars/vuikit/vuikit.svg) - UIkit 具有 Vue 的所有功能。[!\[開源軟件\]\[OSS圖標\]](https://github.com/vuikit/vuikit) * [vue-weui](http://adcentury.github.io/vue-weui/) ![](https:/img.shields.io/github/stars%20/adcentury/vue-weui.svg) - 喜歡 vue.js 的 WeUI 組件。[!\[開源軟件\]\[OSS圖標\]](https://github.com/adcentury/vue-weui) * [vue-bulma-components](https://github.com/vouill/vue-bulma-components) ![](https:/img.shields.io/%20github/stars/vouill/vue-bulma-components.svg) - 將 Bulma css api 翻譯成 vue 組件。[!\[開源軟件\]\[OSS圖標\]](https://github.com/vouill/vue-bulma-components) * [v-semantic](https://github.com/eddow/v-semantic) ![](https:/img.shields.io/github/stars/%20eddow/v-semantic.svg) - [semantic-ui2](https://semantic-ui.com) 與 vue.js2 的集成。[!\[開源軟件\]\[OSS圖標\]](https://github.com/eddow/v-semantic) * [vue-mdc-adapter](https://stasson.github.io/vue-mdc-adapter/#/) ![](https://github.com/tentenco/awesome/blob/main/devops/awesome-uikit/https:/img.shields%20.io/github/stars/stasson/vue-mdc-adapter.svg) - VueJS 的材質組件。[!\[開源軟件\]\[OSS圖標\]](https://github.com/stasson/vue-mdc-adapter) * [vuecidity](https://vuecidity.wemakesites.net) - Vue.js 2.0 的 UI 組件框架。[!\[開源軟件\]\[OSS 圖標\]](https://bitbucket.org/acidmartin/vuecidity/) * [vx-ui](http://vx.bittyos.com) ![](https:/img.shields.io/github/stars/yunfeihuang/vx%20-ui.svg) - vue 組件。[!\[開源軟件\]\[OSS圖標\]](https://github.com/yunfeihuang/vx-ui) * [zircleUI](http://zircle.io) ![](https://img.shields.io/github/stars/zircleUI/zircleUI.svg?label=) - 圓形縮放 UI 庫。[!\[開源軟件\]\[OSS圖標\]](https://github.com/zircleUI/zircleUI) * [xy-ui](https://xy-ui.codelabo.cn/docs) ![](https:/img.shields.io/github/stars/%20XboxYan/xy-ui.svg) - 給未來的Java組件UI組件庫。 \[!\[Open-Source Software]\[OSS Icon]]\( ui) * [時代](https://zeit-vue.now.sh) ![](https:/img.shields.io/github/stars/zeit-ui/%20vue.svg) - Zeit 風格的 Vue 實現。[!\[開源軟件\]\[OSS圖標\]](https://github.com/zeit-ui/vue) #### 角度 [![](https://github.com/tentenco/awesome/blob/main/devops/awesome-uikit/assets/angular-icon.svg)](https://github.com/angular/angular) *\[Angular]\(https ://github.com/angular/angular) 基於組件庫。* * [Alyle UI](https://alyle-ui.firebaseapp.com) ![](https:/img.shields.io/github/stars/Alyle/Alyle%20-UI.svg) - 極簡設計，一組 Angular 組件。[!\[開源軟件\]\[OSS圖標\]](https://github.com/Alyle/Alyle-UI) * [元素角度](https://element-angular.faas.ele.me) ![](https:/img.shields.io/github/stars/ElemeFE%20/element-angular.svg) - 基於 Angular 2 構建的 Element Design 組件 [!\[Open-Source Software\]\[OSS Icon\]](https://github.com/ElemeFE/element-angular) * [fuel-ui](http://fuelinteractive.github.io/fuel-ui/#/) ![](https:/img.shields.io/github%20/stars/FuelInteractive/fuel-ui.svg) - 用於 Angular 2 的 Bootstrap 4 組件和指令 \[!\[Open-Source Software]\[OSS Icon]]\( /燃料-ui) * [材料](https://material.angular.io) ![](https:/img.shields.io/github/stars/angular/material2.svg) - Angular 的 Material Design 組件 [!\[Open-Source Software\]\[OSS Icon\]](https://github.com/angular/material2) * [ngOfficeUIFabric](http://ngofficeuifabric.com) ![](https:/img.shields.io/github/stars/ngOfficeUIFabric/ng-officeuifabric.svg) - 一個社區驅動的項目，簡化了在基於 Angular 的應用程序中實現 Fabric [!\[Open-Source Software\]\[OSS Icon\]](https://github.com/ngOfficeUIFabric/ng-officeuifabric) * [NG-ZORRO](https://ng.ant.design/docs/introduce/en) ![](https:/img.shields.io/github/%20stars/NG-ZORRO/ng-zorro-antd.svg) - Ant Design of Angular \[!\[開源軟件]\[OSS Icon]]\( ng-zorro-antd) * [ng2-bootstrap](https://valor-software.com/ngx-bootstrap/#/) ![](https:/img.shields.io/github%20/stars/valor-software/ngx-bootstrap.svg) - Native Angular2 Bootstrap 3&4 組件 \[!\[Open-Source Software]\[OSS Icon]]\( ngx-引導程序） * [ng-lightning](http://ng-lightning.github.io/ng-lightning/) ![](https:/img.shields.io/github%20/stars/ng-lightning/ng-lightning.svg) - 用於閃電設計系統的原生 Angular 2 組件和指令 \[!\[Open-Source Software]\[OSS Icon]]\( /ng-閃電/ng-閃電) * [ngSemantic](https://ng-semantic.herokuapp.com/#/) ![](https:/img.shields.io/github/stars/vladotesanovic%20/ngSemantic.svg) - 基於 Semantic UI 的 UI 組件 [!\[Open-Source Software\]\[OSS Icon\]](https://github.com/vladotesanovic/ngSemantic) * [ngx-ui](https://swimlane.github.io/ngx-ui) ![](https:/img.shields.io/github/stars/%20Swimlane/ngx-ui.svg) - Angular2 及更高版本的樣式和組件庫！[!\[開源軟件\]\[OSS圖標\]](https://github.com/swimlane/ngx-ui) * [ng-devui](https://devui.design) ![](https:/img.shields.io/github/stars/DevCloudFE/ng-devui%20.svg) - 基於 Angular 的 DevUI 組件！[!\[開源軟件\]\[OSS圖標\]](https://github.com/DevCloudFE/ng-devui) * [ng-bootstrap](https://ng-bootstrap.github.io/#/home) ![](https:/img.shields.io/github/%20stars/ng-bootstrap/ng-bootstrap.svg) - ui-bootstrap 團隊為 Bootstrap 4 提供的 Angular 4 指令 \[!\[Open-Source Software]\[OSS Icon]]\(. com/ng-bootstrap/ng-bootstrap) * [prime-ng](https://www.primefaces.org/primeng/#/) ![](https:/img.shields.io/github/stars%20/primefaces/primeng.svg) - Angular 2 豐富的 UI 組件集合 [!\[Open-Source Software\]\[OSS Icon\]](https://github.com/primefaces/primeng) * [Teradata 共價](https://teradata.github.io/covalent/#/) ![](https:/img.shields.io/github/stars/%20Teradata/covalent.svg) - 基於@angular/material 2.0 [!\[Open-Source Software\]\[OSS Icon\]](https://github.com/Teradata/covalent) 的 UI 平台 * [telerik-angular](http://www.telerik.com/kendo-angular-ui/) ![](https:/img.shields.io/github%20/stars/telerik/kendo-angular.svg) - Angular 的 Kendo UI。[!\[開源軟件\]\[OSS圖標\]](https://github.com/telerik/kendo-angular) * [vmware 清晰度](https://vmware.github.io/clarity/) ![](https://img.shields.io/github/stars/vmware/%E6%B8%85%E6%99%B0%E5%BA%A6.svg?label=) - 主要是一個僅 CSS 的框架，但一些組件被移植到 Angular 2 [!\[Open-Source Software\]\[OSS Icon\]](https://github.com/vmware/clarity) \###桑 [![](https://github.com/tentenco/awesome/blob/main/devops/awesome-uikit/assets/san-icon.svg)](https://github.com/ecomfe/san) *\[San]\(https ://github.com/ecomfe/san) 是一個靈活的 JavaScript 組件框架* * [san-mui](https://ecomfe.github.io/san-mui) ![](https:/img.shields.io/github/stars/%20ecomfe/san-mui.svg) - 一組實現 Google Material Design 的 SAN 組件 \[!\[Open-Source Software]\[OSS Icon]]\( \###秘銀 * [Construct-UI](https://vrimar.github.io/construct-ui) ![](https:/img.shields.io/github/stars/%20vrimar/construct-ui.svg) - Mithril.js UI 庫。[!\[開源軟件\]\[OSS圖標\]](https://github.com/vrimar/construct-ui) * [聚乙烯](https://github.com/ArthurClemens/polythene) ![](https:/img.shields.io/github/stars/ArthurClemens/polythene%E3%80%82%20svg) - Mithril 和 React 的 Material Design 組件庫 [!\[Open-Source Software\]\[OSS Icon\]](https://github.com/ArthurClemens/polythene) #### 網絡單元 [![](https://web-cell.dev/WebCell-0.f1ffd28b.png)*\* ](https://web-cell.dev)[*WebCell*](https://web-cell.dev) *是一個基於 JSX & TypeScript* 的 Web 組件引擎 * [BootCell](https://bootstrap.web-cell.dev) ![](https:/img.shields.io/github/stars/EasyWebApp/BootCell%20.svg) - 基於 WebCell v2 & BootStrap v4 的 Web Components UI 庫 [!\[Open-Source Software\]\[OSS Icon\]](https://github.com/EasyWebApp/BootCell) #### 全力以赴 *支持* [*React*](https://github.com/facebook/react)*、*[*Angular*](https://github.com/angular/angular) *和* [*Vue*](https://github.com/vuejs/vue) *)* * [Handsontable](https://handsontable.com) ![](https:/img.shields.io/github/stars/handsontable/handsontable.svg) - 帶有電子表格外觀的 JavaScript/HTML5 數據網格組件 [!\[Open-Source Software\]\[OSS Icon\]](https://github.com/handsontable/handsontable) * [無頭用戶界面](https://headlessui.dev) ![](https:/img.shields.io/github/stars/tailwindlabs/headlessui.svg) - 完全無樣式、完全可訪問的 UI 組件，旨在與 Tailwind CSS 完美集成。[!\[開源軟件\]\[OSS圖標\]](https://github.com/tailwindlabs/headlessui) * [MUI](https://www.muicss.com) ![](https:/img.shields.io/github/stars/muicss/mui.svg%20) - 輕量級 CSS 框架 [!\[開源軟件\]\[OSS 圖標\]](https://github.com/muicss/mui) * [溫泉用戶界面](https://onsen.io) ![](https:/img.shields.io/github/stars/OnsenUI/OnsenUI.svg) - 使用 HTML5 和 JavaScript 的移動應用程序開發框架和 SDK。[!\[開源軟件\]\[OSS圖標\]](https://github.com/OnsenUI/OnsenUI) * [KPC](https://onsen.io) ![](https:/img.shields.io/github/stars/ksc-fe/kpc.svg%20) - Intact、Vue、React 和 Angular 的 UI 組件庫。[!\[開源軟件\]\[OSS圖標\]](https://github.com/ksc-fe/kpc) * [故事書](https://storybook.js.org) ![](https:/img.shields.io/github/stars/storybooks/storybook.svg) - 交互式 UI 組件開發和測試：React、React Native、Vue、Angular [!\[Open-Source Software\]\[OSS Icon\]](https://github.com/storybooks/storybook) * [Zag](https://onsen.io) ![](https:/img.shields.io/github/stars/chakra-ui/zag.svg%20) - 可訪問 JavaScript 組件的有限狀態機。[!\[開源軟件\]\[OSS圖標\]](https://github.com/chakra-ui/zag) ＃＃＃ 傳統 * [引導程序](http://getbootstrap.com) ![](https://img.shields.io/github/stars/twbs/bootstrap.svg?label=) - 使用模塊化和可定制的 UI 組件創建漂亮的應用程序。[!\[開源軟件\]\[OSS圖標\]](https://github.com/twbs/bootstrap) * [布爾瑪](https://purecss.io) ![](https:/img.shields.io/github/stars/jgthms/bulma.svg) - 是一個基於 Flexbox 的免費開源 CSS 框架。[!\[開源軟件\]\[OSS圖標\]](https://github.com/jgthms/bulma) * [Pico.css](https://picocss.com) ![](https:/img.shields.io/github/stars/picocss/pico.svg%20) - 語義 HTML 的最小 CSS 框架。[!\[開源軟件\]\[OSS圖標\]](https://github.com/picocss/pico) * [bootflat](https://github.com/bootflat/bootflat.github.io) ![](https:/img.shields.io/github/stars/%20bootflat/bootflat.github.io.svg) - BOOTFLAT 是基於 Bootstrap 3.3.0 CSS 框架的開源 Flat UI KIT。[!\[開源軟件\]\[OSS圖標\]](https://github.com/bootflat/bootflat.github.io) * [設計系統](https://github.com/salesforce-ux/design-system) ![](https:/img.shields.io/github/%20stars/salesforce-ux/design-system.svg) - Salesforce Lightning 設計系統。[!\[開源軟件\]\[OSS圖標\]](https://github.com/salesforce-ux/design-system) * [DXY-UI](https://dxy-f2e.github.io/dxy-ui/docs/) \