Awesome UI component library
Last updated
Last updated
[](https://github.com/anubhavsrivastava/awesome-ui-component-library/graphs/貢獻者）
UI 樣式/工具包/設計系統的框架組件庫的精選列表
設計系統 -
此列表不包括單個組件庫，如按鈕、選擇、表單等
＃＃ 內容
[反應]（#反應）
[角度]（#angular）
＃＃＃ 工具
##秘銀
＃＃ 貢獻
歡迎提出建議和 PR！
＃＃ 執照
- 可訪問的 React 組件基元（也適用於 Svelte、Vue 3 和 Angular）。
- 基於 的 React 組件
- 基於 React.js 的移動 web 組件庫
[](https ://github.com/arwesjs/arwes) - 用於 Web 應用程序的未來科幻和賽博朋克圖形用戶界面框架
- 企業級 UI 設計語言和基於 React 的實現。Ant-design Pro 可用
- Atlasssian 的官方 React UI 套件是 Atlassian 設計指南 (ADG) 的技術實現
- 用於構建 Skyscanner 產品的背包設計系統
- 構建孤獨星球 UI 體驗的組件庫。
- 一個實現基本 UI 設計的 React 組件庫
[] (https://github.com/nikgraf/belle/) - 一組針對移動和桌面優化的 React 組件，具有高度可定制的樣式，可以在基礎級別上配置，也可以為每個組件單獨配置。
- Bloom 充當可重用 React 組件和 AppearHere 常用樣式的中央存儲庫。它由 create-react-app 引導。
- Help Scout 設計系統的 React 組件
[](https ://github.com/palantir/blueprint) - 一個基於 React 的 UI 工具包，用於為桌面應用程序構建複雜的、數據密集的 Web 界面。
- Buffer 的 React UI 組件共享集合
- 在 Buttercup 產品中使用的 React UI 組件
- 根據 IBM 的 React 組件
- HubSpot Canvas 是 HubSpot 用於構建產品的設計系統。
- Cloudflare UI 框架
- React 應用程序的模塊化和可訪問的 UI 組件
- Auth0 設計系統的組件庫
- 超過 170 個響應式設計塊可用於您的 Web 或移動應用程序。所有塊都基於 Bootstrap 庫
- Elastic UI 框架是 React UI 組件的集合，用於在 Elastic 快速構建用戶界面
- 最初為 VueJs 構建，Library 提供了豐富的可定制組件選擇以及完整的樣式指南
- React.js 網站和應用程序的 UI 工具包
[] (https://github.com/segmentio/evergreen) - Evergreen 是來自 Segment 的 React UI 框架，用於網絡上的產品。
- 一組 React 組件，用於構建 Microsoft 的 Office 和 Office 365 體驗，用 Typescript 編寫.
- falcon-ui 是一個可組合、主題化、設計系統驅動的 UI 庫React 的組件。
- 是一個 React 組件庫，用於在 Alfa-Bank 創建 Web 界面
- 前端界面元素的集合，可以在 MYOB 基於瀏覽器的產品中重複使用。
- Fyndiq 的可重用 Web 前端組件庫
- 基於 Garden css 的 Garden React 組件
- 一組支持 Pinterest 設計語言的 React UI 組件。
- 使用對象表示法的 CSSinJS 在 React 中實現 GOV.UK 設計系統（帶有 styled-組件）。
[] (https://github.com/grommet/grommet) - 基於 React 的框架，提供可訪問性、模塊化、響應性和主題。
[] (https://github.com/gumgum/gumdrops) - GumGum 的 React 可重用組件庫
- 受 Priceline 設計系統啟發的組件
- 具有 nijigen 風格的反應 UIKit。
- 阿里巴巴設計套件
- 由 Instructure, Inc 製作的 UI 組件庫
- 可汗學院向社區發布的 React UI 組件
- Klarna 的用於 React 的 UI 組件庫
- 這個庫是 Salesforce 的 React 實現
- 實現 Google 的 Material Design 的組件。示例用法可以在 中查看。
- 基於 Bootstrap 4 的 Material Design UI KIT
- MongoDB 設計系統包含構成所有 MongoDB 產品的用戶體驗的 UI 構建塊。
- 用於 Web 的設計系統和 React 組件庫，可讓您快速構建高質量、可訪問的應用程序。由 創建
[ - Plasma 是一個設計系統，用於創建合理的現代界面。
- 用於創建跨 Pluralsight 產品的內聚設計的 UI 構建塊
- Polaris React 是一個基於 的組件庫)
- 用於在 Pluralsight 產品中創建具有凝聚力的設計的 UI 構建塊。
- 這個項目提供了超過 60 個具有多個主題的 UI 組件的豐富而獨特的選擇
- Quran.com、Quranicaudio.com 和 Salah.com 中使用的通用組件
- React 的綜合 Bulma UI 框架
[](https ://github.com/reakit/reakit) - 用於構建真正交互式 UI 和組件的工具包符合 WAI-ARIA，並且所有組件都符合單元素模式
- React 應用程序和設計系統的無障礙基礎
[] (https://github.com/bcrumbs/reactackle) - 使用 styled-components 構建的 React UI 庫，提供跨瀏覽器支持
[] (https://github.com/reactstrap/reactstrap) - 支持組合和控制的無狀態 React Bootstrap 4 組件。該庫不依賴於 jQuery 或 Bootstrap javascript
- 帶有 Win95 UI 的 React 組件庫
- React-Bootstrap 是使用 React 對 Bootstrap 3 組件的完整重新實現。
- UI 組件庫，旨在為 Web 帶來原生桌面體驗，包含許多 macOS Sierra 和 Windows 10 組件。
- - UI 設計的 React 組件。
- 用於 Ionic 的 React 組件，它允許我們構建與原生應用程序無法區分的 iOS 和 Android 應用程序。
- React Material Web Components，封裝了 Google 的官方 Material Design 組件。包括 Flow 和 Typescript 類型。單獨包裝的組件。
- 用於反應的材料設計，由 materialize.css 提供支持
- React 工具包，用於使用 Google 的 Material Design 構建 Web 應用程序，具有高度可定制的主題和样式 (Sass)
- 響應式 React UI 組件
- 一組實現 Google 的 Material Design 規範的 React 組件。它由 CSS 模塊提供支持，並與您的 webpack 工作流程和諧地集成在一起。
- 基於 bootstrap 4.0 的 React 組件集合。該項目不再維護。
- 使用 UIkit CSS 框架收集的 React 組件。
- 實現微軟 UWP 設計 & Fluent 設計的 React 組件
- 受微信啟發使用 React 構建的 WeUI 組件
[](https ://github.com/rebassjs/rebass) - React UI 組件庫和設計系統，使用 styled-components 和 styled-system 構建。對於 Styled-components 粉絲來說，這是一個不錯的選擇。
- 一個 UI 組件庫，使用 React、recompose、styled-components 和 styled-system 構建。
- 這個 UI 組件集合旨在為 JetBrains 內部構建的基於 Web 的產品提供所有必要的構建塊
[](https ://github.com/rsuite/rsuite) - RSUITE (React Suite) 是一組用於企業系統產品的 React 組件庫。
- 簡潔的移動UI組件庫
- SEEK 的生活方式指南，由 React、webpack、CSS 模塊和 Less 提供支持.
- Semantic UI React 是 Semantic UI 的官方 React 集成。Netflix、亞馬遜和其他主要組織都在使用它。示例可以在 找到
- Shards React 是基於 的免費、美觀且現代的 React UI 工具包碎片/)
- Smooth UI 是 React 的樣式系統/UI 庫。它適用於樣式化組件
- Snacks 是一個基於 JavaScript 和 React 的組件庫。它有一個與 Instacart 風格相匹配的默認主題。
- Spark 設計系統是一個模式和組件系統，用於為 Quicken Loans 金融科技產品系列創建用戶界面。
- Stardust 是一套用於構建 UI 庫的規範和工具。它基於 [Semantic UI React (SUIR)] (https://github.com/Semantic-Org/Semantic-UI-React) 的一個分支。
- 支持 i18n 的 React 主題組件庫。
- 適合想要構建包容性和可訪問性網站的 React 開發人員的首選庫。推薦用於可訪問性 (a11y)。
- 一個高質量的 UI 工具包，一個 React 16+ 的組件庫
[](https ://github.com/uxcore/uxcore) - 阿里巴巴公司為企業應用而生的 React UI 組件套件。
- Yammer.com 的可重用組件框架，它是在 Office UI Fabric 組件之上使用 React 構建的
- Uniform 是 Hudl 的設計系統。它的存在是為了通過設計和代碼實現來統一 Hudl 的產品。
- React 組件庫支持的 VTEX 設計系統
- 基於React v16的前端UI組件庫，用於移動頁面的快速開發
- Zent 是有贊開發和使用的 React 組件庫，目前有 50 多個組件。
- Zero-UI 是一個易於使用的 Web UI 組件框架，其中包含一組有用的組件。
- React 驅動的中國風格組件庫
[付費] - 超過 60 個用於 React 的高性能、輕量級、模塊化和響應式 UI 組件。
[付費] - 來自 Sencha UI 的 115 多個預構建的 UI 組件，這些組件完全受支持並旨在交互和協同工作
[付費] - 基於 jqwidgets 的 React 組件。
[付費] - 為 React 從頭開始構建的 90 多個專業 UI 組件 - 響應迅速、可訪問且功能豐富。
[付費] - 移動 UI 控件的 React 組件。
[付費] - 來自葡萄城的 Wizmo 工具包的 React 組件。
- React 組件，可輕鬆將完全可定制的粒子動畫添加到網站和 Web 應用程序
- 使用 React.js 加載微調器的集合
[](https ://github.com/plouc/nivo) - Nivo 提供了一組豐富的 dataviz 組件，構建在很棒的 d3 和 Reactjs 庫之上。
[](https: //github.com/recharts/recharts) - 重新定義了用 D3 構建的圖表庫組件
- 純 CSS React 加載組件的集合
- 用於微調器的可重用反應組件
- 用於虛擬化大型數據集以高效呈現列表和表格數據的 React 組件
[](https ://github.com/silevis/reactgrid) - 向您的 React 應用程序添加類似電子表格的行為
- Font Awesome、Feather、Material Design 和 Octicons 圖標包作為樣式組件
[付費] - 網格/表格的跨平台組件
[] (teambit/bitp) — 端到端組件共享和管理。它負責在您的庫中開發和發布組件（自動依賴解析、版本控制等），使它們每個都可以在任何地方單獨使用和開發，因此團隊可以大規模管理和共享組件。
— 將 React 組件渲染到 Sketch；為設計系統量身定制
- 關於 React 生態系統的一些很棒的東西的集合。
- React 組件和庫目錄
- 有用的 React 組件的集合
- 可訪問的 Vue 3 組件基元（也適用於 Svelte、React 和 Angular）。
- 一個清新扁平的 UI-Kit 專門用於桌面應用
- Vue.js 的下一代 Material UI
- Vue.js 的 Bootstrap 4 組件和網格系統的全面實現，以及廣泛和自動化的 WAI-ARIA 可訪問性標記。
[] (https://github.com/buefy/buefy) - 基於 Bulma 的 Vue.js 輕量級 UI 組件，這是該庫僅有的兩個內部依賴項
- Carvue 是一個基於 Carbon-Design 和 VueJS 的 UI 組件庫。
- CION 是一個主要為 Vue.js 應用程序構建的設計系統。您可以將其用作構建自己的設計系統的起點。
- cube-ui 是一個移動應用的UI組件庫
[] (https://github.com/ElemeFE/element) - 庫提供豐富的可定制組件選擇以及基於 Vue 2.0 的完整樣式指南
- Vue.js 的企業 UI。基於百度公司的 ONE DESIGN。
- 提供了一個基於 Vue 的 Web 工具包，帶有整潔的組件。該庫支持 ES2015 + Webpack 工作流程
[](https ://github.com/framevuerk/framevuerk) - 基於 Vue.js 的響應式、多語言、雙向支持和可配置的 UI 框架
- 用於構建 iOS 和 Android 應用程序的全功能 HTML 框架
- Vue2.0 的 UI 工具包，將 cli 和 utils 作為生態系統的一部分
[](https ://github.com/iview/iview) - iView 提供了數十個使用 Vue.js 構建的 UI 組件和小部件，並採用簡潔優雅的設計
- jsmod的目標是提供高自由度（高擴展性）的ui組件，統一桌面和移動使用
- 敏銳的 UI 是受材料設計啟發的 Vue 組件的集合，但並不意味著是材料設計的完整實現規格。
- 基於 Vue.js 2 的移動 UI 工具包，專為金融場景設計。
- Material-components-vue 集成了 mdc-web (by google) vanilla 組件
- 基於 Bootstrap 4 的 Material Design UI KIT
- Vue.js 的移動 UI 元素
- Muse UI 有 40 多個 UI 組件和可自定義的主題，用於 Google 的 Material Design
[] (https://github.com/jdf2e/nutui) - 一套京東風格的輕量級移動Vue組件庫
- N3 組件庫是用 Vue.js 構建的，是前端或全棧工程師的強大庫快速建立網頁
- Vue.js 的 Office UI Fabric 實現，使用 office- 構建ui-fabric-js
- 100多個組件是基於原始Onsen UI框架專門為Material和Flat設計製作的
- 為 Vue.js 從網格到 UI 元素構建的原型組件庫
[] (https://github.com/quasarframework/quasar) - 響應式單頁應用程序、服務器端渲染應用程序、漸進式 Web 應用程序、混合移動應用程序（看起來很原生！）和具有主題支持的電子應用程序。
- Rubik UI 是一個基於 Vue.js 2.0+ 的 Material Design 風格的 ui 庫，可用於 PC 和移動設備。
- Semantic UI Vue 是 Semantic UI 的官方 VueJS 集成。它被使用由 Netflix、亞馬遜和其他主要組織提供。
- 在您的 vue 項目中輕鬆使用語義 UI 組件
- 作為 Apollo 設計系統的基地，Space Kit 為開發人員在 Apollo 品牌界面中使用提供了必要的設計資源。
- 官方 Vue 組織應用程序的 UI 組件
[] (https://github.com/wxsms/uiv) - Uiv 是 Vue 2 的 Bootstrap 3 組件庫。所有組件組合約為 20KB，唯一的外部依賴項是 Vue 和 Bootstrap CSS
- 基於 Vue 構建的輕量級移動 UI 組件
[](https ://github.com/vuetifyjs/vuetify) - 根據 Google 的材料設計指南實現的 Vue.js 組件。Vuetify 支持跨平台的所有現代瀏覽器，包括 IE11 和 Safari 9+
- 基於 Vue.js(2.x) 和 Bulma 的 UI 組件庫
- 受 Google Material Design 和 Bootstrap 啟發的組件庫，包含 30 多個 UI 組件、24 列響應式佈局網格系統。
[] (https://github.com/LeCoupa/vuedarkmode) - 一組極簡主義的組件，專為像我們一樣喜歡黑暗界面的失眠症患者而設計。
- VueJS 框架的組件庫，包含大約 40 個組件，支持 20 多個主題。
- 將 Bulma css api 翻譯成 vue 組件
- Material design style 移動端UI庫，設計資源參考
- 實現谷歌材料設計的庫。該庫還提供了一個 webpack 樣板、Nuxt.js 的 SSR 模板和一個 HTML 文件以從框架開始
- Vue Native 是一個使用 JavaScript 構建跨平台原生移動應用程序的框架
- 為 Vue.js 集成材料組件，遵循 Google 推薦的最佳實踐
- 這是對 Vue.js 的 Material Components web 的改編
- 帶有 Vue2.js 的移動組件庫
[] (https://github.com/mimecorg/vuido) - 使用 Vue.js 的本機桌面應用程序。
[] (https://github.com/vuikit/vuikit) - 一個響應式 Vue 2 UI 庫，用於基於 UIkit 3 框架的網站界面。
[](https ://github.com/airyland/vux) - 基於WeUI的移動UI組件
- semantic-ui2 與 vue.js2 的集成。
- 這裡是 Ant Design 的 Vue 實現，開發和服務於企業後端產品。
- 使用 vue 和 ant 設計構建的 UI 組件
- Vuestrap 基礎組件擴展了 Bootstrap 4。使用 vuestrap、純 Vue.js 和網頁包。
- 使用 Bootstrap v4 編寫的 Vuejs 組件和指令，利用官方的 Bootstrap JS。
- Vuesax 是一個 Vuejs 組件庫，可促進前端開發並以出色的視覺質量簡化工作。
- 一組基於 Bootstrap 的標記和 CSS 的原生 Vue.js 組件。不依賴 jQuery 或 Bootstrap 的 JavaScript。
- 基於 Vue 2.0 快速構建應用佈局的輕量級移動 UI 控件庫
- 開發可縮放用戶界面的前端庫
[付費] - 超過 60 個用於 Vue 的高性能、輕量級、模塊化和響應式 UI 組件。
- Vue 庫，可輕鬆將完全可自定義的粒子動畫添加到網站和 Web 應用程序。
[付費] - 一套專注於業務應用程序的 UI 組件，包含數據網格等組件
- 用於微調器的可重用 Vue 組件
[付費] - 基於 jqwidgets 的 Vue 組件。
- 與 Vue.js 相關的精彩內容的精選列表
- 基於 React Native 的基於 Ant 設計的可配置移動 UI 組件庫
[](https ://github.com/blankapp/ui) - React Native 的高度可定制和主題化組件
- 一組用於構建 React Native 應用程序的 UI 組件。
- 可定制的準備使用 30 多個可與 [React Native for Web] 配合使用的組件(https://github.com/ necolas/react-native-web)
[](https ://github.com/GeekyAnts/NativeBase) - React Native 的基本跨平台 UI 組件。對於 React Native 愛好者來說是同類中最好的之一。受到推崇的！
- Panza 是用於 react-native 的無狀態、功能性 ui 組件的集合，並深受優秀的 rebass 庫的啟發。
- 一組用於 React Native 框架的原生 Android UI 組件和模塊React Native 核心團隊目前沒有實現
- 跨平台 React Native UI 工具包和 API
- 跨平台 React Native UI 工具包。支持自定義並提供用於在 React Native 中創建應用程序的多合一 UI 工具包
- React Native 的聊天 UI 組件（以前稱為 Gifted Messenger）
- React Native 組件實現材料設計。（不再維護有利於材料紙）
- 一套UI組件，目的是介紹Material Design使用 React Native 構建的應用程序
- React Native 的高度可定制的材料設計組件。這個工具包的演示可以看到
- 組件遵循材料設計指南 v2.0，更好的 RTL 支持和完整的主題選項
- 具有易於定制的元素的移動框架，能夠創建您最常使用的組件的樣式配置（按鈕、輸入等）
- React Native 的 UI 工具集和組件庫
- “React Native for Web”使得在網絡上運行 React Native 組件和 API 成為可能使用 React DOM 的網頁
- 帶有樣板的 UI 套件，用於您的 React-Native 項目
- 適用於 iOS 和 Android 的 React Native 應用程序的可樣式化組件。我們所有的組件都是可組合和可定制的。
- React Native 的 UI 庫，提供 20+ 純 JS(ES6) 組件，專注於內容展示和動作控制。
- 各種可定制的反應原生日曆組件。
- 將折線圖、面積圖、餅圖和條形圖添加到您的 React Native 應用程序
- 使用 ReactART 創建動畫循環進度的 React Native 組件
- React Native 的動畫加載指示器集合
- Native Directory 是 React Native 庫的精選列表，可幫助您構建項目。
- 很棒的 React Native 組件、新聞、工具和學習資料！
- 可訪問的 Angular 組件基元（也適用於 Svelte、React 和 Vue 3）。
- Alfresco 應用程序開發框架 (ADF) 是一組帶有指令、管道和其他接口的 Angular 組件。應視為框架。
- 極簡設計，一組 Angular 組件。
- 基於PC網站後端產品快速開發的Angular 4.0+前端UI組件庫。
- Clarity 是 VMware 的一個開源設計系統，它匯集了 UX 指南、HTML/CSS 框架和 Angular 組件
- 基於 Angular Material 構建的 Teradata UI 平台
- 最初為 VueJs 構建，Library 提供了豐富的可定制組件選擇以及完整的樣式指南
- Fuel-UI 是用於 Bootstrap 4 的原生 Angular 2 組件、指令和管道的集合。
- 帶有組件、身份驗證和安全性的 UI 工具包，適用於您的下一個 Angular7 應用程序
- 帶有 Angular 的 Bootstrap 3/Bootstrap 4 組件，適用於移動設備和桌面設備。
- 輕量級、受 Material Design 啟發的按鈕，用於滾動到頁面頂部。沒有依賴關係。純角！
- Swimlane 的 Angular 組件和样式庫。
- 替換 bootstrap 這是沒有維護時間更長，它為 Angular 提供了 Bootstrap 4 組件，沒有第 3 方 JS 依賴項
- 為 Saleforce 閃電設計系統構建的 Angular 組件
- 基於 Semantic-UI 的 Angular UI 構建塊
- NG-ZORRO 組件旨在提供基於企業級 UI關於螞蟻設計
- Angular 的官方組件庫，實現了 Google 的材料設計，使用 Angular 和 TypeScript 構建
- 基於 Bootstrap 4 的 Material Design UI KIT
- 100多個組件是基於原始Onsen UI框架專門為Material和Flat設計製作的
- 的一組 Angular 6+ 組件。它還支持 Angular 4 和 5。
- 這個項目提供了超過 60 個具有多個主題的 UI 組件的豐富而獨特的選擇
- 的 React 組件
- Semantic UI Angular 是 Semantic UI 的官方 Angular 集成。它由Netflix、亞馬遜和其他主要組織。
[付費] - 超過 60 個用於 Angular 的高性能、輕量級、模塊化和響應式 UI 組件。
- Angular 組件，可輕鬆將完全可定制的粒子動畫添加到網站和 Web 應用程序
- 6 種不同類型圖表的 Angular 指令，其屬性基於 chart.js。
- Dragula 的官方 Angular 包裝器，用於拖放
- 很棒的 Angular 資源的精選列表
- Angular 2+ 組件和庫目錄
- 使用 Bootstrap 作為原生 Ember 組件的 Ember-cli 插件
- 該項目旨在成為[Bootstrap for Ember](https://github.com/ember-addons/bootstrap- for-ember) 項目，因為此套件中的所有組件都未綁定到任何特定的 CSS 框架。
- 在 EmberJS 中實現 Material Design
- 用於 Ember.js 應用程序的 Material Design Lite
- 這個插件是 CSS 庫 UIkit 的包裝器，它公開了某些組件，為用戶提供了一種簡單的使用方式ember 應用程序中的 UIkit。
- Semantic UI Ember 是 Semantic UI 的官方 EmberJS 集成。它被使用由 Netflix、亞馬遜和其他主要組織提供。
- 一個提供各種 UI 組件的 Ember CLI 插件。
- 一個 Ember 風格的 Bootstrap 4.x 生態系統
- Ember CLI 的 AnyChart 組件提供了一種將 AnyChart JavaScript 圖表與 Ember 框架一起使用的簡單方法
- 很棒的 Ember.js 東西的精選列表。
- mithriljs 的 UI 工具包，其中包含許多受藍圖啟發的常見組件
- Mithril 的 Material Design 組件庫
- 一個物化的 CSS 秘銀組件庫
- Mithril.js 的 UI 組件
- Mithril 精選列表
- 使用 LitElement 構建的輕量級、基於標準、與框架無關的 Web 組件庫
- 用於常見用戶界面模式的高質量、可定制的 Web 組件
- 作為 Web 組件實現的 Material Design
by DannyMoerkerke - 材料設計的自定義元素
- 用於構建業務 Web 應用程序的不斷發展的高質量 Web 組件集
- 一組具有手繪粗略外觀的常見 UI 元素。
- 很棒的 Web 組件資源的精選列表。
— 一個 CLI 實用程序，用於計算/驗證調色板的可訪問幻數。
- 一個非常輕量且靈活的可訪問模態對話框腳本。
- a11y-dialog 到 React 的端口。
- a11y-dialog 到 Vue 的端口。
- a11y-dialog 到 Svelte 的端口。
- 一個輕量級 (<1Kb) JavaScript 包，用於促進兼容 a11y 的選項卡式界面。
- 該項目旨在創建一個可重用且可訪問的主導航模塊。
— 可訪問組件和模式的列表。
— 一個完全可訪問的 HTML、CSS 和 Javascript 前端框架，用於創建 Web 和移動應用程序。
1.【你用過哪些ui庫？】（https://www.reddit.com/r/reactjs/comments/9fhxj0/what_are_some_of_the_ui_libraries_you_used_for/） 2. 3.【多少個ui庫就夠了？】(https://dev.to/rhymes/how-many-ui-libraries-is-enough-17om)
- 網站風格指南資源
- 一個全面的設計系統、樣式指南和模式庫列表，您可以從中獲取靈感。
請閱讀 以開始使用。
知識共享零 v1.0 通用
