Awesome UI component library
[](https://github.com/anubhavsrivastava/awesome-ui-component-library/graphs/貢獻者)
UI 樣式/工具包/設計系統的框架組件庫的精選列表
設計系統 - 設計系統綜合指南
此列表不包括單個組件庫,如按鈕、選擇、表單等
## 內容
反應
AgnosticUI - 可訪問的 React 組件基元(也適用於 Svelte、Vue 3 和 Angular)。
ARWES [](https ://github.com/arwesjs/arwes) - 用於 Web 應用程序的未來科幻和賽博朋克圖形用戶界面框架
Ant Design React ![Repo Star](https://img.shields.io/github/stars/ant-design/ant-design.svg?label=&style =social) - 企業級 UI 設計語言和基於 React 的實現。Ant-design Pro 可用 這裡
Atlaskit - Atlasssian 的官方 React UI 套件是 Atlassian 設計指南 (ADG) 的技術實現
背包 - 用於構建 Skyscanner 產品的背包設計系統
基礎 UI - 一個實現基本 UI 設計的 React 組件庫
Belle [] (https://github.com/nikgraf/belle/) - 一組針對移動和桌面優化的 React 組件,具有高度可定制的樣式,可以在基礎級別上配置,也可以為每個組件單獨配置。
Bloom - Bloom 充當可重用 React 組件和 AppearHere 常用樣式的中央存儲庫。它由 create-react-app 引導。
藍色 ![Repo Star](https://img.shields.io/github/stars/helpscout/hsds-react.svg?label =&style=social) - Help Scout 設計系統的 React 組件
藍圖 [](https ://github.com/palantir/blueprint) - 一個基於 React 的 UI 工具包,用於為桌面應用程序構建複雜的、數據密集的 Web 界面。
緩衝區 ![Repo Star](https://img.shields.io/github/stars/bufferapp/buffer-components.svg?label= &style=social) - Buffer 的 React UI 組件共享集合
Buttercup UI - 在 Buttercup 產品中使用的 React UI 組件
Canvas - HubSpot Canvas 是 HubSpot 用於構建產品的設計系統。
chakra-ui ![Repo Star](https://img.shields.io/github/stars/chakra-ui/chakra-ui.svg?label =&style=social) - React 應用程序的模塊化和可訪問的 UI 組件
Cosmos - Auth0 設計系統的組件庫
design-blocks ![Repo Star](https://img.shields.io/github/stars/froala/react-froala-design- blocks.svg?label=&style=social) - 超過 170 個響應式設計塊可用於您的 Web 或移動應用程序。所有塊都基於 Bootstrap 庫
彈性 - Elastic UI 框架是 React UI 組件的集合,用於在 Elastic 快速構建用戶界面
元素 ![Repo Star](https://img.shields.io/github/stars/ElemeFE/element-react.svg?label= &style=social) - 最初為 VueJs 構建,Library 提供了豐富的可定制組件選擇以及完整的樣式指南
元素 UI - React.js 網站和應用程序的 UI 工具包
Evergreen [] (https://github.com/segmentio/evergreen) - Evergreen 是來自 Segment 的 React UI 框架,用於網絡上的產品。
Fabric ![Repo Star](https://img.shields.io/github/stars/OfficeDev/office-ui-fabric- react.svg?label=&style=social) - 一組 React 組件,用於構建 Microsoft 的 Office 和 Office 365 體驗,用 Typescript 編寫.
Falcon UI ![Repo Star](https://img.shields.io/github/stars/deity-io/falcon.svg? label=&style=social) - falcon-ui 是一個可組合、主題化、設計系統驅動的 UI 庫React 的組件。
羽毛 ![Repo Star](https://img.shields.io/github/stars/alfa-laboratory/arui-feather.svg?label=&style =social) - 是一個 React 組件庫,用於在 Alfa-Bank 創建 Web 界面
Feelix - 前端界面元素的集合,可以在 MYOB 基於瀏覽器的產品中重複使用。
FYNDIQ-UI ![Repo Star](https://img.shields.io/github/stars/fyndiq/fyndiq-ui.svg? label=&style=social) - Fyndiq 的可重用 Web 前端組件庫
花園 ![Repo Star](https://img.shields.io/github/stars/zendeskgarden/react-components.svg?label =&style=social) - 基於 Garden css 的 Garden React 組件
格式塔 - 一組支持 Pinterest 設計語言的 React UI 組件。
GovUK React ![Repo Star](https://img.shields.io/github/stars/govuk-react/govuk- react.svg?label=&style=social) - 使用對象表示法的 CSSinJS 在 React 中實現 GOV.UK 設計系統(帶有 styled-組件)。
Grommet [] (https://github.com/grommet/grommet) - 基於 React 的框架,提供可訪問性、模塊化、響應性和主題。
Gumdrops [] (https://github.com/gumgum/gumdrops) - GumGum 的 React 可重用組件庫
Hana UI ![Repo Star](https://img.shields.io/github/stars/hana-group/hana-ui.svg ?label=&style=social) - 具有 nijigen 風格的反應 UIKit。
Ice - 阿里巴巴設計套件
Instructure UI - 由 Instructure, Inc 製作的 UI 組件庫
Klarna UI ![Repo Star](https://img.shields.io/github/stars/klarna/ui.svg?label=&style= social) - Klarna 的用於 React 的 UI 組件庫
材質 UI ![Repo Star](https://img.shields.io/github/stars/mui-org/material-ui.svg?label= &style=social) - 實現 Google 的 Material Design 的組件。示例用法可以在 here 中查看。
MDBootstrap ![Repo Star](https://img.shields.io/github/stars/mdbootstrap/React-Bootstrap-with -Material-Design.svg?label=&style=social) - 基於 Bootstrap 4 的 Material Design UI KIT
MongoDB UI 設計 - MongoDB 設計系統包含構成所有 MongoDB 產品的用戶體驗的 UI 構建塊。
Mineral UI ![Repo Star](https://img.shields.io/github/stars/mineral-ui/mineral-ui.svg?label= &style=social) - 用於 Web 的設計系統和 React 組件庫,可讓您快速構建高質量、可訪問的應用程序。由 CA Technologies 創建
好的!React [![Repo Star](https://img.shields.io/github/stars/textkernel/nice-react.svg?label=&style=社交)](https://github.com/textkernel/nice-react) - 很好!React 提供了來自 Nice! 的 UI 元素!React 組件形式的 UI 庫
OneUI - 可重用 UI 組件的 Textkernel OneUI 庫
Onsen UI React - 100多個組件是基於原始Onsen UI框架專門為Material和Flat設計製作的
軌道組件 - Orbit-components 是一個 React 組件庫。基於 Kiwi 的設計,這決定了他們的產品風格。
Orion - 在 Loco 的組件庫中,基於 React Semantic UI。
Patternfly React - PatternFly 項目 的一組 React 組件,基於引導程序 3 的頂部。
Pivotal UI ![Repo Star](https://img.shields.io/github/stars/pivotal-cf/pivotal-ui.svg?label=&style =social) - Pivotal UI 是為 Pivotal 品牌設計的 React 組件的集合
Plasma [](https ://github.com/wework/plasma) - Plasma 是一個設計系統,用於創建合理的現代界面。
Pluralsight 設計系統 ![Repo Star](https://img.shields.io/github/stars/pluralsight/design-system.svg?label= &style=social) - 用於創建跨 Pluralsight 產品的內聚設計的 UI 構建塊
Priceline One ![Repo Star](https://img.shields.io/github/stars/pluralsight/design-system.svg? label=&style=social) - 用於在 Pluralsight 產品中創建具有凝聚力的設計的 UI 構建塊。
Prime React - 這個項目提供了超過 60 個具有多個主題的 UI 組件的豐富而獨特的選擇
古蘭經 ![Repo Star](https://img.shields.io/github/stars/quran/common-components.svg?label =&style=social) - Quran.com、Quranicaudio.com 和 Salah.com 中使用的通用組件
RBX - React 的綜合 Bulma UI 框架
Reakit [](https ://github.com/reakit/reakit) - 用於構建真正交互式 UI 和組件的工具包符合 WAI-ARIA,並且所有組件都符合單元素模式
Reach UI ![Repo Star](https://img.shields.io/github/stars/reach/reach-ui.svg?label=&style= social) - React 應用程序和設計系統的無障礙基礎
Reactackle [] (https://github.com/bcrumbs/reactackle) - 使用 styled-components 構建的 React UI 庫,提供跨瀏覽器支持
reactstrap [] (https://github.com/reactstrap/reactstrap) - 支持組合和控制的無狀態 React Bootstrap 4 組件。該庫不依賴於 jQuery 或 Bootstrap javascript
React95 - 帶有 Win95 UI 的 React 組件庫
React Bootstrap![Repo Star](https://img.shields.io/github/stars/react-bootstrap/react-bootstrap.svg? label=&style=social) - React-Bootstrap 是使用 React 對 Bootstrap 3 組件的完整重新實現。
React 桌面 ![Repo Star](https://img.shields.io/github/stars/gabrielbull/react-desktop.svg?label=&style= social) - UI 組件庫,旨在為 Web 帶來原生桌面體驗,包含許多 macOS Sierra 和 Windows 10 組件。
React 基金會 - - Foundation UI 設計的 React 組件。
React Ionic - 用於 Ionic 的 React 組件,它允許我們構建與原生應用程序無法區分的 iOS 和 Android 應用程序。
React Material Web Components ![Repo Star](https://img.shields.io/github/stars/jamesmfriedman/rmwc.svg?label= &style=social) - React Material Web Components,封裝了 Google 的官方 Material Design 組件。包括 Flow 和 Typescript 類型。單獨包裝的組件。
React Materialize ![Repo Star](https://img.shields.io/github/stars/react-materialize/react-materialize.svg?label =&style=social) - 用於反應的材料設計,由 materialize.css 提供支持
React MD ![Repo Star](https://img.shields.io/github/stars/mlaursen/react-md.svg?label= &style=social) - React 工具包,用於使用 Google 的 Material Design 構建 Web 應用程序,具有高度可定制的主題和样式 (Sass)
React 工具箱 ![Repo Star](https://img.shields.io/github/stars/react-toolbox/react-toolbox.svg?label=&style =social) - 一組實現 Google 的 Material Design 規範的 React 組件。它由 CSS 模塊提供支持,並與您的 webpack 工作流程和諧地集成在一起。
React UI ![Repo Star](https://img.shields.io/github/stars/Lobos/react-ui.svg?label =&style=social) - 基於 bootstrap 4.0 的 React 組件集合。該項目不再維護。
React UIKit 組件 ![Repo Star](https://img.shields.io/github/stars/kbuechl/react-uikit -components.svg?label=&style=social) - 使用 UIkit CSS 框架收集的 React 組件。
React UWP ![Repo Star](https://img.shields.io/github/stars/myxvisual/react-uwp.svg?label= &style=social) - 實現微軟 UWP 設計 & Fluent 設計的 React 組件
React WeUI ![Repo Star](https://img.shields.io/github/stars/weui/react-weui.svg ?label=&style=social) - 受微信啟發使用 React 構建的 WeUI 組件
Rebass [](https ://github.com/rebassjs/rebass) - React UI 組件庫和設計系統,使用 styled-components 和 styled-system 構建。對於 Styled-components 粉絲來說,這是一個不錯的選擇。
Rendition ![Repo Star](https://img.shields.io/github/stars/balena-io-modules/rendition .svg?label=&style=social) - 一個 UI 組件庫,使用 React、recompose、styled-components 和 styled-system 構建。
RingUI ![Repo Star](https://img.shields.io/github/stars/JetBrains/ring-ui.svg?label =&style=social) - 這個 UI 組件集合旨在為 JetBrains 內部構建的基於 Web 的產品提供所有必要的構建塊
RSuite [](https ://github.com/rsuite/rsuite) - RSUITE (React Suite) 是一組用於企業系統產品的 React 組件庫。
Seek Style ![Repo Star](https://img.shields.io/github/stars/seek-oss/seek -style-guide.svg?label=&style=social) - SEEK 的生活方式指南,由 React、webpack、CSS 模塊和 Less 提供支持.
語義 UI React ![Repo Star](https://img.shields.io/github/stars/Semantic-Org/Semantic-UI-React .svg?label=&style=social)- Semantic UI React 是 Semantic UI 的官方 React 集成。Netflix、亞馬遜和其他主要組織都在使用它。示例可以在 這裡 找到
Shards ![Repo Star](https://img.shields.io/github/stars/designrevision/shards-react.svg?label =&style=social) - Shards React 是基於 Shards 的免費、美觀且現代的 React UI 工具包碎片/)
平滑 UI ![Repo Star](https://img.shields.io/github/stars/smooth-code/smooth-ui. svg?label=&style=social) - Smooth UI 是 React 的樣式系統/UI 庫。它適用於樣式化組件
小吃 - Snacks 是一個基於 JavaScript 和 React 的組件庫。它有一個與 Instacart 風格相匹配的默認主題。
Spark - Spark 設計系統是一個模式和組件系統,用於為 Quicken Loans 金融科技產品系列創建用戶界面。
星塵用戶界面 ![Repo Star](https://img.shields.io/github/stars/stardust-ui/react.svg? label=&style=social) - Stardust 是一套用於構建 UI 庫的規範和工具。它基於 [Semantic UI React (SUIR)] (https://github.com/Semantic-Org/Semantic-UI-React) 的一個分支。
Shineout ![Repo Star](https://img.shields.io/github/stars/sheinsight/shineout.svg ?label=&style=social) - 支持 i18n 的 React 主題組件庫。
Tenon-UI ![Repo Star](https://img.shields.io/github/stars/tenon-io/tenon-ui.svg ?label=&style=social) - 適合想要構建包容性和可訪問性網站的 React 開發人員的首選庫。推薦用於可訪問性 (a11y)。
UIW - 一個高質量的 UI 工具包,一個 React 16+ 的組件庫
UXCore [](https ://github.com/uxcore/uxcore) - 阿里巴巴公司為企業應用而生的 React UI 組件套件。
YamUI - Yammer.com 的可重用組件框架,它是在 Office UI Fabric 組件之上使用 React 構建的
Uniform - Uniform 是 Hudl 的設計系統。它的存在是為了通過設計和代碼實現來統一 Hudl 的產品。
VTEX 風格指南 - React 組件庫支持的 VTEX 設計系統
Yep-React ![Repo Star](https://img.shields.io/github/stars/jdf2e/yep-react.svg?label =&style=social) - 基於React v16的前端UI組件庫,用於移動頁面的快速開發
Zent ![Repo Star](https://img.shields.io/github/stars/youzan/zent.svg? label=&style=social) - Zent 是有贊開發和使用的 React 組件庫,目前有 50 多個組件。
Zero-UI ![Repo Star](https://img.shields.io/github/stars/AlphaGo88/Zero-UI.svg ?label=&style=social) - Zero-UI 是一個易於使用的 Web UI 組件框架,其中包含一組有用的組件。
[付費]
Essential JS 2 for React by Syncfusion - 超過 60 個用於 React 的高性能、輕量級、模塊化和響應式 UI 組件。[付費]
ExtReact ![Repo Star](https://img.shields.io/github/stars/sencha/ext- react.svg?label=&style=social) - 來自 Sencha UI 的 115 多個預構建的 UI 組件,這些組件完全受支持並旨在交互和協同工作[付費]
jQWidgets - 基於 jqwidgets 的 React 組件。[付費]
KendoReact - 為 React 從頭開始構建的 90 多個專業 UI 組件 - 響應迅速、可訪問且功能豐富。[付費]
Mobiscroll - 移動 UI 控件的 React 組件。[付費]
Wijmo React - 來自葡萄城的 Wizmo 工具包的 React 組件。React tsParticles - React 組件,可輕鬆將完全可定制的粒子動畫添加到網站和 Web 應用程序
特殊用例庫
鹵素 - 使用 React.js 加載微調器的集合
Nivo [](https ://github.com/plouc/nivo) - Nivo 提供了一組豐富的 dataviz 組件,構建在很棒的 d3 和 Reactjs 庫之上。
Recharts [](https: //github.com/recharts/recharts) - 重新定義了用 D3 構建的圖表庫組件
React Virtualized ![Repo Star](https://img.shields.io/github/stars/bvaughn/react-virtualized.svg? label=&style=social) - 用於虛擬化大型數據集以高效呈現列表和表格數據的 React 組件
ReactGrid [](https ://github.com/silevis/reactgrid) - 向您的 React 應用程序添加類似電子表格的行為
樣式圖標 ![Repo Star](https://img.shields.io/github/stars/jacobwgillespie/styled-icons.svg?label= &style=social) - Font Awesome、Feather、Material Design 和 Octicons 圖標包作為樣式組件
[付費]
ag-grid - 網格/表格的跨平台組件
### 工具
Bit [] (teambit/bitp) — 端到端組件共享和管理。它負責在您的庫中開發和發布組件(自動依賴解析、版本控制等),使它們每個都可以在任何地方單獨使用和開發,因此團隊可以大規模管理和共享組件。
react-sketchapp ![Repo Star](https://img.shields.io/github/stars/airbnb/react-sketchapp.svg?label= &style=social) — 將 React 組件渲染到 Sketch;為設計系統量身定制
相關社區列表
Awesome React - 關於 React 生態系統的一些很棒的東西的集合。
Awesome React 組件 - React 組件和庫目錄
libreact - 有用的 React 組件的集合
VueJS
AgnosticUI - 可訪問的 Vue 3 組件基元(也適用於 Svelte、React 和 Angular)。
AT-UI ![Repo Star](https://img.shields.io/github/stars/at-ui/at-ui.svg?label =&style=social) - 一個清新扁平的 UI-Kit 專門用於桌面應用
BalmUI ![Repo Star](https://img.shields.io/github/stars/balmjs/ui-vue.svg?label=&style =social) - Vue.js 的下一代 Material UI
Bootstrap Vue ![Repo Star](https://img.shields.io/github/stars/bootstrap-vue/bootstrap-vue.svg? label=&style=social) - Vue.js 的 Bootstrap 4 組件和網格系統的全面實現,以及廣泛和自動化的 WAI-ARIA 可訪問性標記。
Buefy [] (https://github.com/buefy/buefy) - 基於 Bulma 的 Vue.js 輕量級 UI 組件,這是該庫僅有的兩個內部依賴項
CarvueJS ![Repo Star](https://img.shields.io/github/stars/CarvueJS/carbon-components-vue.svg?label= &style=social) - Carvue 是一個基於 Carbon-Design 和 VueJS 的 UI 組件庫。
Cion ![Repo Star](https://img.shields.io/github/stars/visualjerk/vue-cion-design-system.svg?label =&style=social) - CION 是一個主要為 Vue.js 應用程序構建的設計系統。您可以將其用作構建自己的設計系統的起點。
Cube UI ![Repo Star](https://img.shields.io/github/stars/didi/cube -ui.svg?label=&style=social) - cube-ui 是一個移動應用的UI組件庫
元素 [] (https://github.com/ElemeFE/element) - 庫提供豐富的可定制組件選擇以及基於 Vue 2.0 的完整樣式指南
企業用戶界面 ![Repo Star](https://img.shields.io/github/stars/ecomfe/veui.svg?label =&style=social) - Vue.js 的企業 UI。基於百度公司的 ONE DESIGN。
Fish-UI ![Repo Star](https://img.shields.io/github/stars/myliang/fish-ui.svg ?label=&style=social) - 提供了一個基於 Vue 的 Web 工具包,帶有整潔的組件。該庫支持 ES2015 + Webpack 工作流程
Framevuerk [](https ://github.com/framevuerk/framevuerk) - 基於 Vue.js 的響應式、多語言、雙向支持和可配置的 UI 框架
Framework 7 Vue - 用於構建 iOS 和 Android 應用程序的全功能 HTML 框架
HEYUI - Vue2.0 的 UI 工具包,將 cli 和 utils 作為生態系統的一部分
iView [](https ://github.com/iview/iview) - iView 提供了數十個使用 Vue.js 構建的 UI 組件和小部件,並採用簡潔優雅的設計
JSmod Vue ![Repo Star](https://img.shields.io/github/stars/chaogao/jsmod-pc-vue.svg? label=&style=social) - jsmod的目標是提供高自由度(高擴展性)的ui組件,統一桌面和移動使用
Keen-UI ![Repo Star](https://img.shields.io/github/stars/JosephusPaye/Keen-UI.svg? label=&style=social) - 敏銳的 UI 是受材料設計啟發的 Vue 組件的集合,但並不意味著是材料設計的完整實現規格。
Mand Mobile 2 ![Repo Star](https://img.shields.io/github/stars/didi/mand-mobile .svg?label=&style=social) - 基於 Vue.js 2 的移動 UI 工具包,專為金融場景設計。
Material Components Vue ![Repo Star](https://img.shields.io/github/stars/matsp/material-components -vue.svg?label=&style=social) - Material-components-vue 集成了 mdc-web (by google) vanilla 組件
MDBootstrap ![Repo Star](https://img.shields.io/github/stars/mdbootstrap/Vue-Bootstrap-with -Material-Design.svg?label=&style=social) - 基於 Bootstrap 4 的 Material Design UI KIT
Muse UI ![Repo Star](https://img.shields.io/github/stars/museui/muse-ui.svg?label=&style= social) - Muse UI 有 40 多個 UI 組件和可自定義的主題,用於 Google 的 Material Design
NutUI [] (https://github.com/jdf2e/nutui) - 一套京東風格的輕量級移動Vue組件庫
N3 組件 ![Repo Star](https://img.shields.io/github/stars/N3-components/N3- components.svg?label=&style=social) - N3 組件庫是用 Vue.js 構建的,是前端或全棧工程師的強大庫快速建立網頁
Office UI Fabric Vue ![Repo Star](https://img.shields.io/github/stars/aidewoode/ office-ui-fabric-vue.svg?label=&style=social) - Vue.js 的 Office UI Fabric 實現,使用 office- 構建ui-fabric-js
溫泉用戶界面 - 100多個組件是基於原始Onsen UI框架專門為Material和Flat設計製作的
ProtoVue - 為 Vue.js 從網格到 UI 元素構建的原型組件庫
Quasar [] (https://github.com/quasarframework/quasar) - 響應式單頁應用程序、服務器端渲染應用程序、漸進式 Web 應用程序、混合移動應用程序(看起來很原生!)和具有主題支持的電子應用程序。
Rubik UI ![Repo Star](https://img.shields.io/github/stars/ccforward/rubik.svg?label= &style=social) - Rubik UI 是一個基於 Vue.js 2.0+ 的 Material Design 風格的 ui 庫,可用於 PC 和移動設備。
語義 UI Vue ![Repo Star](https://img.shields.io/github/stars/Semantic-UI-Vue/Semantic -UI-Vue.svg?label=&style=social) - Semantic UI Vue 是 Semantic UI 的官方 VueJS 集成。它被使用由 Netflix、亞馬遜和其他主要組織提供。
SemVue - 在您的 vue 項目中輕鬆使用語義 UI 組件
Space-kit ![Repo Star](https://img.shields.io/github/stars/apollographql/space-kit.svg?label= &style=social) - 作為 Apollo 設計系統的基地,Space Kit 為開發人員在 Apollo 品牌界面中使用提供了必要的設計資源。
UI - 官方 Vue 組織應用程序的 UI 組件
Uiv [] (https://github.com/wxsms/uiv) - Uiv 是 Vue 2 的 Bootstrap 3 組件庫。所有組件組合約為 20KB,唯一的外部依賴項是 Vue 和 Bootstrap CSS
Vant - 基於 Vue 構建的輕量級移動 UI 組件
Vuetify [](https ://github.com/vuetifyjs/vuetify) - 根據 Google 的材料設計指南實現的 Vue.js 組件。Vuetify 支持跨平台的所有現代瀏覽器,包括 IE11 和 Safari 9+
Vueblu ![Repo Star](https://img.shields.io/github/stars/chenz24/vue-blu.svg?label= &style=social) - 基於 Vue.js(2.x) 和 Bulma 的 UI 組件庫
Vuecidity - 受 Google Material Design 和 Bootstrap 啟發的組件庫,包含 30 多個 UI 組件、24 列響應式佈局網格系統。
Vuedarkmode [] (https://github.com/LeCoupa/vuedarkmode) - 一組極簡主義的組件,專為像我們一樣喜歡黑暗界面的失眠症患者而設計。
VueFace ![Repo Star](https://img.shields.io/github/stars/sudheerj/vueface.svg?label=&style =social) - VueJS 框架的組件庫,包含大約 40 個組件,支持 20 多個主題。
Vue Bulma ![Repo Star](https://img.shields.io/github/stars/vouill/vue-bulma-components .svg?label=&style=social) - 將 Bulma css api 翻譯成 vue 組件
Vue Carbon ![Repo Star](https://img.shields.io/github/stars/myronliu347/vue-carbon.svg?label =&style=social) - Material design style 移動端UI庫,設計資源參考FrameWork7
Vue Material - 實現谷歌材料設計的庫。該庫還提供了一個 webpack 樣板、Nuxt.js 的 SSR 模板和一個 HTML 文件以從框架開始
Vue Native ![Repo Star](https://img.shields.io/github/stars/GeekyAnts/vue-native-core.svg?label= &style=social) - Vue Native 是一個使用 JavaScript 構建跨平台原生移動應用程序的框架
Vue MDC 適配器 ![Repo Star](https://img.shields.io/github/stars/stasson/vue -mdc-adapter.svg?label=&style=social) - 為 Vue.js 集成材料組件,遵循 Google 推薦的最佳實踐
Vue MDC ![Repo Star](https://img.shields.io/github/stars/posva/vue-mdc.svg?label =&style=social) - 這是對 Vue.js 的 Material Components web 的改編
Vuido [] (https://github.com/mimecorg/vuido) - 使用 Vue.js 的本機桌面應用程序。
Vuikit [] (https://github.com/vuikit/vuikit) - 一個響應式 Vue 2 UI 庫,用於基於 UIkit 3 框架的網站界面。
Vux [](https ://github.com/airyland/vux) - 基於WeUI的移動UI組件
v-semantic ![Repo Star](https://img.shields.io/github/stars/eddow/v-semantic.svg? label=&style=social) - semantic-ui2 與 vue.js2 的集成。
vue-antd ![Repo Star](https://img.shields.io/github/stars/okoala/vue-antd.svg? label=&style=social) - 這裡是 Ant Design 的 Vue 實現,開發和服務於企業後端產品。
vue-beauty ![Repo Star](https://img.shields.io/github/stars/FE-Driver/vue -beauty.svg?label=&style=social) - 使用 vue 和 ant 設計構建的 UI 組件
vuestrap-base-components ![Repo Star](https://img.shields.io/github/stars/kzima /vuestrap-base-components.svg?label=&style=social) - Vuestrap 基礎組件擴展了 Bootstrap 4。使用 vuestrap、純 Vue.js 和網頁包。
VueBoot - 使用 Bootstrap v4 編寫的 Vuejs 組件和指令,利用官方的 Bootstrap JS。
Vuesax - Vuesax 是一個 Vuejs 組件庫,可促進前端開發並以出色的視覺質量簡化工作。
VueStrap ![Repo Star](https://img.shields.io/github/stars/wffranco/vue-strap.svg?label =&style=social) - 一組基於 Bootstrap 的標記和 CSS 的原生 Vue.js 組件。不依賴 jQuery 或 Bootstrap 的 JavaScript。
WDUI - 基於 Vue 2.0 快速構建應用佈局的輕量級移動 UI 控件庫
[付費]
Syncfusion 的 Vue 必備 JS 2 - 超過 60 個用於 Vue 的高性能、輕量級、模塊化和響應式 UI 組件。Particles.vue - Vue 庫,可輕鬆將完全可自定義的粒子動畫添加到網站和 Web 應用程序。
[付費]
Kendo UI for Vue - 一套專注於業務應用程序的 UI 組件,包含數據網格等組件
特殊用例庫
[付費]
jQWidgets - 基於 jqwidgets 的 Vue 組件。
相關社區列表
Awesome Vue - 與 Vue.js 相關的精彩內容的精選列表
反應原生
Ant Design Mobile RN ![Repo Star](https://img.shields.io/github/stars/ant-design/ant-design- mobile-rn.svg?label=&style=social) - 基於 React Native 的基於 Ant 設計的可配置移動 UI 組件庫
Blankapp [](https ://github.com/blankapp/ui) - React Native 的高度可定制和主題化組件
Carbon Native ![Repo Star](https://img.shields.io/github/stars/carbon-native/carbon-native.svg?label=&style= social) - 一組用於構建 React Native 應用程序的 UI 組件。
Nachos UI ![Repo Star](https://img.shields.io/github/stars/nachos-ui/nachos-ui.svg? label=&style=social) - 可定制的準備使用 30 多個可與 [React Native for Web] 配合使用的組件(https://github.com/ necolas/react-native-web)
NativeBase [](https ://github.com/GeekyAnts/NativeBase) - React Native 的基本跨平台 UI 組件。對於 React Native 愛好者來說是同類中最好的之一。受到推崇的!
Panza ![Repo Star](https://img.shields.io/github/stars/panza-org/panza.svg?label= &style=social) - Panza 是用於 react-native 的無狀態、功能性 ui 組件的集合,並深受優秀的 rebass 庫的啟發。
React Native Android 工具包 ![Repo Star](https://img.shields.io/github/stars/adbayb/react -native-android-kit.svg?label=&style=social) - 一組用於 React Native 框架的原生 Android UI 組件和模塊React Native 核心團隊目前沒有實現
React Native Common ![Repo Star](https://img.shields.io/github/stars/rghorbani/react-native -common.svg?label=&style=social) - 跨平台 React Native UI 工具包和 API
React Native Elements ![Repo Star](https://img.shields.io/github/stars/react- native-training/react-native-elements.svg?label=&style=social) - 跨平台 React Native UI 工具包。支持自定義並提供用於在 React Native 中創建應用程序的多合一 UI 工具包
React Native Gifted Chat ![Repo Star](https://img.shields.io/github/stars/wix/react -native-gifted-chat.svg?label=&style=social) - React Native 的聊天 UI 組件(以前稱為 Gifted Messenger)
React Native Material Kit ![Repo Star](https://img.shields.io/github/stars/xinthink/ react-native-material-kit.svg?label=&style=social) - 一套UI組件,目的是介紹Material Design使用 React Native 構建的應用程序
React Native Material UI ![Repo Star](https://img.shields.io/github/stars/xotahal/react -native-material-ui.svg?label=&style=social) - React Native 的高度可定制的材料設計組件。這個工具包的演示可以看到這裡
React Native 論文 ![Repo Star](https://img.shields.io/github/stars/callstack/react-native -paper.svg?label=&style=social) - 組件遵循材料設計指南 v2.0,更好的 RTL 支持和完整的主題選項
React Native UI Kitten ![Repo Star](https://img.shields.io/github/stars /akveo/react-native-ui-kitten.svg?label=&style=social) - 具有易於定制的元素的移動框架,能夠創建您最常使用的組件的樣式配置(按鈕、輸入等)
React Native UI 庫 ![Repo Star](https://img.shields.io/github/stars/wix/ react-native-ui-lib.svg?label=&style=social) - React Native 的 UI 工具集和組件庫
React Native Web ![Repo Star](https://img.shields.io/github/stars/necolas/react -native-web.svg?label=&style=social) - “React Native for Web”使得在網絡上運行 React Native 組件和 API 成為可能使用 React DOM 的網頁
React Virgin ![Repo Star](https://img.shields.io/github/stars/Trixieapp/react-virgin.svg? label=&style=social) - 帶有樣板的 UI 套件,用於您的 React-Native 項目
Shoutem UI ![Repo Star](https://img.shields.io/github/stars/shoutem/ui.svg ?label=&style=social) - 適用於 iOS 和 Android 的 React Native 應用程序的可樣式化組件。我們所有的組件都是可組合和可定制的。
Teaset - React Native 的 UI 庫,提供 20+ 純 JS(ES6) 組件,專注於內容展示和動作控制。
特殊用例庫
React Native 圖表 ![Repo Star](https://img.shields.io/github/stars/tomauty/react-native- chart.svg?label=&style=social) - 將折線圖、面積圖、餅圖和條形圖添加到您的 React Native 應用程序
React Native 循環進度 ![Repo Star](https://img.shields.io/github/stars/bartgryszko/react -native-circular-progress.svg?label=&style=social) - 使用 ReactART 創建動畫循環進度的 React Native 組件
相關社區列表
Native Directory - Native Directory 是 React Native 庫的精選列表,可幫助您構建項目。
Awesome React Native - 很棒的 React Native 組件、新聞、工具和學習資料!
角度
AgnosticUI - 可訪問的 Angular 組件基元(也適用於 Svelte、React 和 Vue 3)。
Alfresco ![Repo Star](https://img.shields.io/github/stars/Alfresco/alfresco-ng2-components .svg?label=&style=social) - Alfresco 應用程序開發框架 (ADF) 是一組帶有指令、管道和其他接口的 Angular 組件。應視為框架。
AT Angular UI ![Repo Star](https://img.shields.io/github/stars/100cm/at-ui-angular.svg ?label=&style=social) - 基於PC網站後端產品快速開發的Angular 4.0+前端UI組件庫。
Clarity - Clarity 是 VMware 的一個開源設計系統,它匯集了 UX 指南、HTML/CSS 框架和 Angular 組件
共價 ![Repo Star](https://img.shields.io/github/stars/Teradata/covalent.svg?label=&style =social) - 基於 Angular Material 構建的 Teradata UI 平台
元素 ![Repo Star](https://img.shields.io/github/stars/ElemeFE/element-angular.svg?label =&style=social) - 最初為 VueJs 構建,Library 提供了豐富的可定制組件選擇以及完整的樣式指南
Fuel UI ![Repo Star](https://img.shields.io/github/stars/FuelInteractive/fuel-ui. svg?label=&style=social) - Fuel-UI 是用於 Bootstrap 4 的原生 Angular 2 組件、指令和管道的集合。
星雲 - 帶有組件、身份驗證和安全性的 UI 工具包,適用於您的下一個 Angular7 應用程序
NGX Bootstrap ![Repo Star](https://img.shields.io/github/stars/valor-software/ngx- bootstrap.svg?label=&style=social) - 帶有 Angular 的 Bootstrap 3/Bootstrap 4 組件,適用於移動設備和桌面設備。
NGX ScrollTop ![Repo Star](https://img.shields.io/github/stars/bartholomej/ngx-scrolltop.svg?label =&style=social) - 輕量級、受 Material Design 啟發的按鈕,用於滾動到頁面頂部。沒有依賴關係。純角!
NGX UI ![Repo Star](https://img.shields.io/github/stars/swimlane/ngx-ui.svg? label=&style=social) - Swimlane 的 Angular 組件和样式庫。
NG Bootstrap ![Repo Star](https://img.shields.io/github/stars/ng-bootstrap/ng-bootstrap.svg? label=&style=social) - 替換 angular-ui bootstrap 這是沒有維護時間更長,它為 Angular 提供了 Bootstrap 4 組件,沒有第 3 方 JS 依賴項
NG Lightning ![Repo Star](https://img.shields.io/github/stars/ng-lightning/ng- Lightning.svg?label=&style=social) - 為 Saleforce 閃電設計系統構建的 Angular 組件
NG Semantic-UI ![Repo Star](https://img.shields.io/github/stars/vladotesanovic/ngSemantic.svg?label= &style=social) - 基於 Semantic-UI 的 Angular UI 構建塊
NG-ZORRO ![Repo Star](https://img.shields.io/github/stars/NG- ZORRO/ng-zorro-antd.svg?label=&style=social) - NG-ZORRO 組件旨在提供基於企業級 UI關於螞蟻設計
材料 2 - Angular 的官方組件庫,實現了 Google 的材料設計,使用 Angular 和 TypeScript 構建
MDBootstrap ![Repo Star](https://img.shields.io/github/stars/mdbootstrap/Angular-Bootstrap-with -Material-Design.svg?label=&style=social) - 基於 Bootstrap 4 的 Material Design UI KIT
溫泉用戶界面 - 100多個組件是基於原始Onsen UI框架專門為Material和Flat設計製作的
PatternFly NG - PatternFly 項目 的一組 Angular 6+ 組件。它還支持 Angular 4 和 5。
Prime NG ![Repo Star](https://img.shields.io/github/stars/primefaces/primeng.svg?label= &style=social) - 這個項目提供了超過 60 個具有多個主題的 UI 組件的豐富而獨特的選擇
Primer組件 - Primer 設計系統 的 React 組件
語義 UI Angular ![Repo Star](https://img.shields.io/github/stars/Semantic-Org/ Semantic-UI-Angular.svg?label=&style=social) - Semantic UI Angular 是 Semantic UI 的官方 Angular 集成。它由Netflix、亞馬遜和其他主要組織。
[付費]
Essential JS 2 for Angular by Syncfusion - 超過 60 個用於 Angular 的高性能、輕量級、模塊化和響應式 UI 組件。NG Particles - Angular 組件,可輕鬆將完全可定制的粒子動畫添加到網站和 Web 應用程序
特殊用例庫
NG2 圖表 ![Repo Star](https://img.shields.io/github/stars/valor-software/ng2-charts.svg ?label=&style=social) - 6 種不同類型圖表的 Angular 指令,其屬性基於 chart.js。
NG2 Dragula ![Repo Star](https://img.shields.io/github/stars/valor-software/ng2-dragula. svg?label=&style=social) - Dragula 的官方 Angular 包裝器,用於拖放
相關社區列表
Awesome Angular - 很棒的 Angular 資源的精選列表
Awesome Angular Components - Angular 2+ 組件和庫目錄
EmberJS
Ember Bootstrap ![Repo Star](https://img.shields.io/github/stars/kaliber5/ember-bootstrap.svg?label= &style=social) - 使用 Bootstrap 作為原生 Ember 組件的 Ember-cli 插件
Ember 組件 ![Repo Star](https://img.shields.io/github/stars/indexiatech/ember-components.svg?label =&style=social) - 該項目旨在成為[Bootstrap for Ember](https://github.com/ember-addons/bootstrap- for-ember) 項目,因為此套件中的所有組件都未綁定到任何特定的 CSS 框架。
Ember 材料設計 ![Repo Star](https://img.shields.io/github/stars/mike1o1/ember-material-design. svg?label=&style=social) - 在 EmberJS 中實現 Material Design
Ember Material Lite ![Repo Star](https://img.shields.io/github/stars/mike-north/ember-material- lite.svg?label=&style=social) - 用於 Ember.js 應用程序的 Material Design Lite
語義 UI Ember ![Repo Star](https://img.shields.io/github/stars/Semantic-Org /Semantic-UI-Ember.svg?label=&style=social) - Semantic UI Ember 是 Semantic UI 的官方 EmberJS 集成。它被使用由 Netflix、亞馬遜和其他主要組織提供。
SL Ember 組件 ![Repo Star](https://img.shields.io/github/stars/softlayer/sl-ember -components.svg?label=&style=social) - 一個提供各種 UI 組件的 Ember CLI 插件。
UI-bootstrap ![Repo Star](https://img.shields.io/github/stars/lifegadget/ui-bootstrap.svg? label=&style=social) - 一個 Ember 風格的 Bootstrap 4.x 生態系統
特殊用例庫
AnyChart-Ember ![Repo Star](https://img.shields.io/github/stars/AnyChart/AnyChart-Ember.svg?label=&style =social) - Ember CLI 的 AnyChart 組件提供了一種將 AnyChart JavaScript 圖表與 Ember 框架一起使用的簡單方法
相關社區列表
Awesome Ember - 很棒的 Ember.js 東西的精選列表。
##秘銀
構造 UI ![Repo Star](https://img.shields.io/github/stars/vrimar/construct-ui.svg? label=&style=social) - mithriljs 的 UI 工具包,其中包含許多受藍圖啟發的常見組件
聚乙烯 ![回購之星](https://img.shields.io/github/stars/ArthurClemens/Polythene.svg ?label=&style=social) - Mithril 的 Material Design 組件庫
相關社區列表
Awesome Mithril - Mithril 精選列表
Web 組件
Aybolit ![Repo Star](https://img.shields.io/github/stars/web-padawan/aybolit.svg?label= &style=social) - 使用 LitElement 構建的輕量級、基於標準、與框架無關的 Web 組件庫
Elix - 用於常見用戶界面模式的高質量、可定制的 Web 組件
Vaadin 組件 - 用於構建業務 Web 應用程序的不斷發展的高質量 Web 組件集
相關社區列表
正確的 Web 組件方式 - 很棒的 Web 組件資源的精選列表。
A11y 組件
a11y-contrast — 一個 CLI 實用程序,用於計算/驗證調色板的可訪問幻數。
a11y-dialog - 一個非常輕量且靈活的可訪問模態對話框腳本。
react-a11y-dialog - a11y-dialog 到 React 的端口。
vue-a11y-dialog - a11y-dialog 到 Vue 的端口。
svelte-a11y-dialog - a11y-dialog 到 Svelte 的端口。
a11y-tabs - 一個輕量級 (<1Kb) JavaScript 包,用於促進兼容 a11y 的選項卡式界面。
a11y-menu - 該項目旨在創建一個可重用且可訪問的主導航模塊。
Scott Ohara 的 a11y 組件 — 可訪問組件和模式的列表。
Deque Cauldron — 一個完全可訪問的 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. 簡單檢查了 21 個 react ui 套件,我完成了! 3.【多少個ui庫就夠了?】(https://dev.to/rhymes/how-many-ui-libraries-is-enough-17om)
風格指南
styleguides.io - 網站風格指南資源
設計系統圖庫 - 一個全面的設計系統、樣式指南和模式庫列表,您可以從中獲取靈感。
## 貢獻
歡迎提出建議和 PR!
請閱讀 貢獻指南 以開始使用。
## 執照
Last updated