> 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-ui-component-library.md).

# Awesome UI component library

[![HitCount](http://hits.dwyl.io/anubhavsrivastava/awesome-ui-component-library.svg)](http://hits.dwyl.io/anubhavsrivastava/awesome-ui-component-library) [![歡迎 PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) \[![貢獻者](https://badgen.net/github/contributors/anubhavsrivastava/awesome-ui-component-library)]\(<https://github.com/anubhavsrivastava/awesome-ui-component-library/graphs/貢獻者）>

[![真棒](https://awesome.re/badge.svg)](https://awesome.re)

> UI 樣式/工具包/設計系統的框架組件庫的精選列表

設計系統 - [設計系統綜合指南](https://www.invisionapp.com/inside-design/guide-to-design-systems/)

`此列表不包括單個組件庫，如按鈕、選擇、表單等`

### 相關列表 - [Awesome UX Design Styleguides](https://github.com/anubhavsrivastava/awesome-ux-design-styles)

＃＃ 內容

* \[反應]（#反應）
  * [特殊用例庫](#special-use-case-libraries)
  * [工具](#tools)
  * [相關社區列表](#related-community-list)
* [VueJS](#vuejs)
  * [特殊用例庫](#special-use-case-libraries-1)
  * [相關社區列表](#related-community-list-1)
* [反應原生](#react-native)
  * [特殊用例庫](#special-use-case-libraries-2)
  * [相關社區列表](#related-community-list-2)
* \[角度]（#angular）
  * [特殊用例庫](#special-use-case-libraries-3)
  * [相關社區列表](#related-community-list-3)
* [EmberJS](#emberjs)
  * [特殊用例庫](#special-use-case-libraries-4)
  * [相關社區列表](#related-community-list-4)
* [秘銀](#mithril)
  * [相關社區列表](#related-community-list-5)
* [Web 組件](#web-components)
  * [相關社區列表](#related-community-list-6)
* [一些社區對話](#some-community-conversations)
* [風格指南](#styleguides)
* [貢獻](#contribution)
* [許可證](#license)

***

## 反應

* [AgnosticUI](https://www.agnosticui.com/) - 可訪問的 React 組件基元（也適用於 Svelte、Vue 3 和 Angular）。
* [Amaze UI](http://amazeui.org/react/) [!\[Repo Star\](https://img.shields.io/github/stars/amazeui/amazeui-react.svg?label=\&style= social)](https://github.com/amazeui/amazeui-react) - 基於 [AmazeUI](http://amazeui.org/) 的 React 組件
* [Amaze UI Touch](http://t.amazeui.org) [!\[Repo Star\](https://img.shields.io/github/stars/amazeui/amazeui-touch.svg?label=\&style= social)](https://github.com/amazeui/amazeui-touch/) - 基於 React.js 的移動 web 組件庫
* [ARWES](https://arwes.dev/) \[![Repo Star](https://img.shields.io/github/stars/arwesjs/arwes.svg?label=\&style=social)]\(https ://github.com/arwesjs/arwes) - 用於 Web 應用程序的未來科幻和賽博朋克圖形用戶界面框架
* [Ant Design React](https://ant.design/) [!\[Repo Star\](https://img.shields.io/github/stars/ant-design/ant-design.svg?label=\&style =social)](https://github.com/ant-design/ant-design) - 企業級 UI 設計語言和基於 React 的實現。Ant-design Pro 可用 [這裡](https://github.com/ant-design/ant-design-pro)
* [Atlaskit](https://atlaskit.atlassian.com/) - Atlasssian 的官方 React UI 套件是 Atlassian 設計指南 (ADG) 的技術實現
* [背包](https://backpack.github.io/components) [![Repo Star](https://img.shields.io/github/stars/Skyscanner/backpack.svg?label=\&style=social) ](https://github.com/Skyscanner/backpack)- 用於構建 Skyscanner 產品的背包設計系統
* [背包 UI](https://lonelyplanet.github.io/backpack-ui) [!\[Repo Star\](https://img.shields.io/github/stars/lonelyplanet/backpack-ui.svg?label =\&style=social)](https://github.com/lonelyplanet/backpack-ui) - 構建孤獨星球 UI 體驗的組件庫。
* [基礎 UI](https://baseui.netlify.com) [![Repo Star](https://img.shields.io/github/stars/uber-web/baseui.svg?label=\&style=social)](https://github.com/uber-web/baseui) - 一個實現基本 UI 設計的 React 組件庫
* [Belle](http://nikgraf.github.io/) \[![Repo Star](https://img.shields.io/github/stars/nikgraf/belle.svg?label=\&style=social)] (<https://github.com/nikgraf/belle/>) - 一組針對移動和桌面優化的 React 組件，具有高度可定制的樣式，可以在基礎級別上配置，也可以為每個組件單獨配置。
* [Bloom](https://bloom.appearhere.co.uk) [![Repo Star](https://img.shields.io/github/stars/appearhere/bloom.svg?label=\&style=social) ](https://github.com/appearhere/bloom)- Bloom 充當可重用 React 組件和 AppearHere 常用樣式的中央存儲庫。它由 create-react-app 引導。
* [藍色](https://helpscout.gitbook.io/hsds-react/) [!\[Repo Star\](https://img.shields.io/github/stars/helpscout/hsds-react.svg?label =\&style=social)](https://github.com/helpscout/hsds-react) - Help Scout 設計系統的 React 組件
* [藍圖](https://blueprintjs.com/) \[![Repo Star](https://img.shields.io/github/stars/palantir/blueprint.svg?label=\&style=social)]\(https ://github.com/palantir/blueprint) - 一個基於 React 的 UI 工具包，用於為桌面應用程序構建複雜的、數據密集的 Web 界面。
* [緩衝區](https://bufferapp.github.io/buffer-components) [!\[Repo Star\](https://img.shields.io/github/stars/bufferapp/buffer-components.svg?label= \&style=social)](https://github.com/bufferapp/buffer-components) - Buffer 的 React UI 組件共享集合
* [Buttercup UI](https://buttercup.pw/) [![Repo Star](https://img.shields.io/github/stars/buttercup/ui.svg?label=\&style=social)](https://github.com/buttercup/ui) - 在 Buttercup 產品中使用的 React UI 組件
* [碳](http://react.carbondesignsystem.com) [!\[Repo Star\](https://img.shields.io/github/stars/IBM/carbon-components-react.svg?label=\&style= social)](https://github.com/IBM/carbon-components-react) - 根據 IBM 的 [Carbon design system](http://carbondesignsystem.com/) React 組件
* [Canvas](https://canvas.hubspot.com/components) - HubSpot Canvas 是 HubSpot 用於構建產品的設計系統。
* [cf-design](https://cloudflare.github.io/cf-ui) [!\[Repo Star\](https://img.shields.io/github/stars/cloudflare/cf-ui.svg? label=\&style=social)](https://github.com/cloudflare/cf-ui) - Cloudflare UI 框架
* [chakra-ui](https://chakra-ui.com/) [!\[Repo Star\](https://img.shields.io/github/stars/chakra-ui/chakra-ui.svg?label =\&style=social)](https://github.com/chakra-ui/chakra-ui) - React 應用程序的模塊化和可訪問的 UI 組件
* [Cosmos](https://auth0-cosmos.now.sh) [![Repo Star](https://img.shields.io/github/stars/auth0/cosmos.svg?label=\&style=social) ](https://github.com/auth0/cosmos)- Auth0 設計系統的組件庫
* [design-blocks](https://www.froala.com/design-blocks) [!\[Repo Star\](https://img.shields.io/github/stars/froala/react-froala-design- blocks.svg?label=\&style=social)](https://github.com/froala/react-froala-design-blocks) - 超過 170 個響應式設計塊可用於您的 Web 或移動應用程序。所有塊都基於 Bootstrap 庫
* [彈性](https://elastic.github.io/eui/) [![Repo Star](https://img.shields.io/github/stars/elastic/eui.svg?label=\&style=social)](https://github.com/elastic/eui) - Elastic UI 框架是 React UI 組件的集合，用於在 Elastic 快速構建用戶界面
* [元素](https://elemefe.github.io/element-react) [!\[Repo Star\](https://img.shields.io/github/stars/ElemeFE/element-react.svg?label= \&style=social)](https://github.com/ElemeFE/element-react) - 最初為 VueJs 構建，Library 提供了豐富的可定制組件選擇以及完整的樣式指南
* [元素 UI](http://elemental-ui.com/) [![Repo Star](https://img.shields.io/github/stars/elementalui/elemental.svg?label=\&style=social) ](https://github.com/elementalui/elemental)- React.js 網站和應用程序的 UI 工具包
* [Evergreen](https://evergreen.segment.com/) \[![Repo Star](https://img.shields.io/github/stars/segmentio/evergreen.svg?label=\&style=social)] (<https://github.com/segmentio/evergreen>) - Evergreen 是來自 Segment 的 React UI 框架，用於網絡上的產品。
* [Fabric](https://developer.microsoft.com/en-us/fabric) [!\[Repo Star\](https://img.shields.io/github/stars/OfficeDev/office-ui-fabric- react.svg?label=\&style=social)](https://github.com/OfficeDev/office-ui-fabric-react) - 一組 React 組件，用於構建 Microsoft 的 Office 和 Office 365 體驗，用 Typescript 編寫.
* [Falcon UI](https://falcon-ui.docs.deity.io/) [!\[Repo Star\](https://img.shields.io/github/stars/deity-io/falcon.svg? label=\&style=social)](https://github.com/deity-io/falcon/tree/master/packages/falcon-ui) - falcon-ui 是一個可組合、主題化、設計系統驅動的 UI 庫React 的組件。
* [羽毛](https://design.alfabank.ru/) [!\[Repo Star\](https://img.shields.io/github/stars/alfa-laboratory/arui-feather.svg?label=\&style =social)](https://github.com/alfa-laboratory/arui-feather) - 是一個 React 組件庫，用於在 Alfa-Bank 創建 Web 界面
* [Feelix](https://feelix.myob.com/) - 前端界面元素的集合，可以在 MYOB 基於瀏覽器的產品中重複使用。
* [FYNDIQ-UI](http://developers.fyndiq.com/fyndiq-ui) [!\[Repo Star\](https://img.shields.io/github/stars/fyndiq/fyndiq-ui.svg? label=\&style=social)](https://github.com/fyndiq/fyndiq-ui) - Fyndiq 的可重用 Web 前端組件庫
* [花園](https://garden.zendesk.com/react-components/) [!\[Repo Star\](https://img.shields.io/github/stars/zendeskgarden/react-components.svg?label =\&style=social)](https://github.com/zendeskgarden/react-components) - 基於 Garden css 的 Garden React 組件
* [格式塔](https://pinterest.github.io/gestalt/) [![Repo Star](https://img.shields.io/github/stars/pinterest/gestalt.svg?label=\&style=social)](https://github.com/pinterest/gestalt) - 一組支持 Pinterest 設計語言的 React UI 組件。
* [GovUK React](https://govuk-react.github.io/govuk-react/) [!\[Repo Star\](https://img.shields.io/github/stars/govuk-react/govuk- react.svg?label=\&style=social)](https://github.com/govuk-react/govuk-react/) - 使用對象表示法的 CSSinJS 在 React 中實現 GOV.UK 設計系統（帶有 styled-組件）。
* [Grommet](https://v2.grommet.io/) \[![Repo Star](https://img.shields.io/github/stars/grommet/grommet.svg?label=\&style=social)] (<https://github.com/grommet/grommet>) - 基於 React 的框架，提供可訪問性、模塊化、響應性和主題。
* [Gumdrops](https://gumdrops.gumgum.com/) \[![Repo Star](https://img.shields.io/github/stars/gumgum/gumdrops.svg?label=\&style=social)] (<https://github.com/gumgum/gumdrops>) - GumGum 的 React 可重用組件庫
* [Hack Club 的設計系統](https://design.hackclub.com) [!\[Repo Star\](https://img.shields.io/github/stars/hackclub/design-system.svg?label=\&style =social)](https://github.com/hackclub/design-system) - 受 Priceline 設計系統啟發的組件
* [Hana UI](https://hana-ui.moe/en/overview) [!\[Repo Star\](https://img.shields.io/github/stars/hana-group/hana-ui.svg ?label=\&style=social)](https://github.com/hana-group/hana-ui) - 具有 nijigen 風格的反應 UIKit。
* [Ice](https://alibaba.github.io/ice/) [![Repo Star](https://img.shields.io/github/stars/alibaba/ice.svg?label=\&style=social)](https://github.com/alibaba/ice/) - 阿里巴巴設計套件
* [Instructure UI](https://instructure.design/) [![Repo Star](https://img.shields.io/github/stars/instructure/instructure-ui.svg?label=\&style=social) ](https://github.com/instructure/instructure-ui)- 由 Instructure, Inc 製作的 UI 組件庫
* [KhanAcademy React](http://khan.github.io/react-components/) [!\[Repo Star\](https://img.shields.io/github/stars/Khan/react-components.svg? label=\&style=social)](https://github.com/Khan/react-components) - 可汗學院向社區發布的 React UI 組件
* [Klarna UI](https://klarna.github.io/ui/) [!\[Repo Star\](https://img.shields.io/github/stars/klarna/ui.svg?label=\&style= social)](https://github.com/klarna/ui) - Klarna 的用於 React 的 UI 組件庫
* [閃電設計系統](https://react.lightningdesignsystem.com/) [!\[Repo Star\](https://img.shields.io/github/stars/salesforce/design-system-react.svg?label =\&style=social)](https://github.com/salesforce/design-system-react) - 這個庫是 Salesforce [Lightning Design System](https://www.lightningdesignsystem.com/) 的 React 實現
* [材質 UI](https://material-ui.com/) [!\[Repo Star\](https://img.shields.io/github/stars/mui-org/material-ui.svg?label= \&style=social)](https://github.com/mui-org/material-ui) - 實現 Google 的 Material Design 的組件。示例用法可以在 [here](https://material-ui.com/getting-started/example-projects/) 中查看。
* [MDBootstrap](http://mdbootstrap.com/material-design-for-bootstrap/) [!\[Repo Star\](https://img.shields.io/github/stars/mdbootstrap/React-Bootstrap-with -Material-Design.svg?label=\&style=social)](https://github.com/mdbootstrap/React-Bootstrap-with-Material-Design) - 基於 Bootstrap 4 的 Material Design UI KIT
* [MongoDB UI 設計](http://mongodb.design) [![Repo Star](https://img.shields.io/github/stars/mongodb/design.svg?label=\&style=social)](https://github.com/mongodb/design) - MongoDB 設計系統包含構成所有 MongoDB 產品的用戶體驗的 UI 構建塊。
* [Mineral UI](https://mineral-ui.com/) [!\[Repo Star\](https://img.shields.io/github/stars/mineral-ui/mineral-ui.svg?label= \&style=social)](https://github.com/mineral-ui/mineral-ui) - 用於 Web 的設計系統和 React 組件庫，可讓您快速構建高質量、可訪問的應用程序。由 [CA Technologies](https://www.ca.com) 創建
* [好的！React](https://github.com/textkernel/nice-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](https://textkernel.github.io/oneui) [![Repo Star](https://img.shields.io/github/stars/textkernel/oneui.svg?label=\&style=social) ](https://github.com/textkernel/oneui)- 可重用 UI 組件的 Textkernel OneUI 庫
* [Onsen UI React](https://onsen.io/react/) [![Repo Star](https://img.shields.io/github/stars/OnsenUI/OnsenUI.svg?label=\&style=social)](https://github.com/OnsenUI/OnsenUI) - 100多個組件是基於原始Onsen UI框架專門為Material和Flat設計製作的
* [軌道組件](https://orbit.kiwi/) [![Repo Star](https://img.shields.io/github/stars/kiwicom/orbit-components.svg?label=\&style=social) ](https://github.com/kiwicom/orbit-components/)- Orbit-components 是一個 React 組件庫。基於 Kiwi 的設計，這決定了他們的產品風格。
* [Orion](https://inloco.github.io/orion/) [![Repo Star](https://img.shields.io/github/stars/inloco/orion.svg?label=\&style=social)](https://github.com/inloco/orion) - 在 Loco 的組件庫中，基於 React Semantic UI。
* [Patternfly React](https://www.patternfly.org) [![Repo Star](https://img.shields.io/github/stars/patternfly/patternfly-react.svg?label=\&style=social)](https://github.com/patternfly/patternfly-react) - [PatternFly 項目](https://github.com/patternfly/patternfly-design-kit) 的一組 React 組件，基於引導程序 3 的頂部。
* [Pivotal UI](https://styleguide.pivotal.io) [!\[Repo Star\](https://img.shields.io/github/stars/pivotal-cf/pivotal-ui.svg?label=\&style =social)](https://github.com/pivotal-cf/pivotal-ui) - Pivotal UI 是為 Pivotal 品牌設計的 React 組件的集合
* [Plasma](http://plasma.guide/) \[![Repo Star](https://img.shields.io/github/stars/wework/plasma.svg?label=\&style=social)]\(https ://github.com/wework/plasma) - Plasma 是一個設計系統，用於創建合理的現代界面。
* [Pluralsight 設計系統](https://design-system.pluralsight.com) [!\[Repo Star\](https://img.shields.io/github/stars/pluralsight/design-system.svg?label= \&style=social)](https://github.com/pluralsight/design-system) - 用於創建跨 Pluralsight 產品的內聚設計的 UI 構建塊
* [Polaris React](https://polaris.shopify.com/) [!\[Repo Star\](https://img.shields.io/github/stars/Shopify/polaris-react.svg?label=\&style= social)](https://github.com/Shopify/polaris-react) - Polaris React 是一個基於 [Shopify 的 Polaris 風格](https://polaris.shopify.com/resources/polaris-ui-kit) 的組件庫)
* [Priceline One](https://pricelinelabs.github.io/design-system/) [!\[Repo Star\](https://img.shields.io/github/stars/pluralsight/design-system.svg? label=\&style=social)](https://github.com/pluralsight/design-system) - 用於在 Pluralsight 產品中創建具有凝聚力的設計的 UI 構建塊。
* [Prime React](https://www.primefaces.org/primereact) [![Repo Star](https://img.shields.io/github/stars/primefaces/primereact.svg?label=\&style=social)](https://github.com/primefaces/primereact) - 這個項目提供了超過 60 個具有多個主題的 UI 組件的豐富而獨特的選擇
* [古蘭經](https://quran.github.io/common-components/) [!\[Repo Star\](https://img.shields.io/github/stars/quran/common-components.svg?label =\&style=social)](https://github.com/quran/common-components) - Quran.com、Quranicaudio.com 和 Salah.com 中使用的通用組件
* [RBX](https://dfee.github.io/rbx/) [![Repo Star](https://img.shields.io/github/stars/dfee/rbx.svg?label=\&style=social)](https://github.com/dfee/rbx) - React 的綜合 Bulma UI 框架
* [Reakit](https://reakit.io/) \[![Repo Star](https://img.shields.io/github/stars/reakit/reakit.svg?label=\&style=social)]\(https ://github.com/reakit/reakit) - 用於構建真正交互式 UI 和組件的工具包符合 WAI-ARIA，並且所有組件都符合單元素模式
* [Reach UI](https://ui.reach.tech/) [!\[Repo Star\](https://img.shields.io/github/stars/reach/reach-ui.svg?label=\&style= social)](https://github.com/reach/reach-ui) - React 應用程序和設計系統的無障礙基礎
* [Reactackle](https://reactackle.braincrumbs.io/) \[![Repo Star](https://img.shields.io/github/stars/bcrumbs/reactackle.svg?label=\&style=social)] (<https://github.com/bcrumbs/reactackle>) - 使用 styled-components 構建的 React UI 庫，提供跨瀏覽器支持
* [reactstrap](https://reactstrap.github.io/) \[![Repo Star](https://img.shields.io/github/stars/reactstrap/reactstrap.svg?label=\&style=social)] (<https://github.com/reactstrap/reactstrap>) - 支持組合和控制的無狀態 React Bootstrap 4 組件。該庫不依賴於 jQuery 或 Bootstrap javascript
* [React95](https://react95.github.io/React95) [![Repo Star](https://img.shields.io/github/stars/React95/React95.svg?label=\&style=social) ](https://github.com/React95/React95)- 帶有 Win95 UI 的 React 組件庫
* [React Bootstrap](https://react-bootstrap.github.io/)[!\[Repo Star\](https://img.shields.io/github/stars/react-bootstrap/react-bootstrap.svg? label=\&style=social)](https://github.com/react-bootstrap/react-bootstrap) - React-Bootstrap 是使用 React 對 Bootstrap 3 組件的完整重新實現。
* [React 桌面](http://reactdesktop.js.org/) [!\[Repo Star\](https://img.shields.io/github/stars/gabrielbull/react-desktop.svg?label=\&style= social)](https://github.com/gabrielbull/react-desktop) - UI 組件庫，旨在為 Web 帶來原生桌面體驗，包含許多 macOS Sierra 和 Windows 10 組件。
* [React 基金會](https://react.foundation/) - [![Repo Star](https://img.shields.io/github/stars/nordsoftware/react-foundation.svg?label=\&style=social)](https://github.com/nordsoftware/react-foundation) - [Foundation](https://foundation.zurb.com/) UI 設計的 React 組件。
* [React Ionic](http://reactionic.github.io/) [![Repo Star](https://img.shields.io/github/stars/pors/reactionic.svg?label=\&style=social) ](https://github.com/pors/reactionic)- 用於 Ionic 的 React 組件，它允許我們構建與原生應用程序無法區分的 iOS 和 Android 應用程序。
* [React Material Web Components](https://jamesmfriedman.github.io/rmwc/) [!\[Repo Star\](https://img.shields.io/github/stars/jamesmfriedman/rmwc.svg?label= \&style=social)](https://github.com/jamesmfriedman/rmwc) - React Material Web Components，封裝了 Google 的官方 Material Design 組件。包括 Flow 和 Typescript 類型。單獨包裝的組件。
* [React Materialize](https://react-materialize.github.io) [!\[Repo Star\](https://img.shields.io/github/stars/react-materialize/react-materialize.svg?label =\&style=social)](https://github.com/react-materialize/react-materialize) - 用於反應的材料設計，由 materialize.css 提供支持
* [React MD](https://react-md.mlaursen.com/) [!\[Repo Star\](https://img.shields.io/github/stars/mlaursen/react-md.svg?label= \&style=social)](https://github.com/mlaursen/react-md) - React 工具包，用於使用 Google 的 Material Design 構建 Web 應用程序，具有高度可定制的主題和样式 (Sass)
* [React 響應式 UI](https://catamphetamine.github.io/react-responsive-ui/) [!\[Repo Star\](https://img.shields.io/github/stars/catamphetamine/react-responsive -ui.svg?label=\&style=social)](https://github.com/catamphetamine/react-responsive-ui) - 響應式 React UI 組件
* [React 工具箱](http://react-toolbox.io) [!\[Repo Star\](https://img.shields.io/github/stars/react-toolbox/react-toolbox.svg?label=\&style =social)](https://github.com/react-toolbox/react-toolbox/) - 一組實現 Google 的 Material Design 規範的 React 組件。它由 CSS 模塊提供支持，並與您的 webpack 工作流程和諧地集成在一起。
* [React UI](http://lobos.github.io/react-ui) [!\[Repo Star\](https://img.shields.io/github/stars/Lobos/react-ui.svg?label =\&style=social)](https://github.com/Lobos/react-ui) - 基於 bootstrap 4.0 的 React 組件集合。該項目不再維護。
* [React UIKit 組件](http://kbuechl.github.io/react-uikit-components/) [!\[Repo Star\](https://img.shields.io/github/stars/kbuechl/react-uikit -components.svg?label=\&style=social)](https://github.com/kbuechl/react-uikit-components) - 使用 UIkit CSS 框架收集的 React 組件。
* [React UWP](https://www.react-uwp.com/) [!\[Repo Star\](https://img.shields.io/github/stars/myxvisual/react-uwp.svg?label= \&style=social)](https://github.com/myxvisual/react-uwp) - 實現微軟 UWP 設計 & Fluent 設計的 React 組件
* [React WeUI](https://weui.github.io/react-weui/docs) [!\[Repo Star\](https://img.shields.io/github/stars/weui/react-weui.svg ?label=\&style=social)](https://github.com/weui/react-weui) - 受微信啟發使用 React 構建的 WeUI 組件
* [Rebass](https://rebassjs.org/) \[![Repo Star](https://img.shields.io/github/stars/rebassjs/rebass.svg?label=\&style=social)]\(https ://github.com/rebassjs/rebass) - React UI 組件庫和設計系統，使用 styled-components 和 styled-system 構建。對於 Styled-components 粉絲來說，這是一個不錯的選擇。
* [Rendition](https://balena-io-modules.github.io/rendition/) [!\[Repo Star\](https://img.shields.io/github/stars/balena-io-modules/rendition .svg?label=\&style=social)](https://github.com/balena-io-modules/rendition) - 一個 UI 組件庫，使用 React、recompose、styled-components 和 styled-system 構建。
* [RingUI](https://jetbrains.github.io/ring-ui/) [!\[Repo Star\](https://img.shields.io/github/stars/JetBrains/ring-ui.svg?label =\&style=social)](https://github.com/JetBrains/ring-ui) - 這個 UI 組件集合旨在為 JetBrains 內部構建的基於 Web 的產品提供所有必要的構建塊
* [RSuite](https://rsuitejs.com/) \[![Repo Star](https://img.shields.io/github/stars/rsuite/rsuite.svg?label=\&style=social)]\(https ://github.com/rsuite/rsuite) - RSUITE (React Suite) 是一組用於企業系統產品的 React 組件庫。
* [Salt UI](https://salt-ui.github.io) [!\[Repo Star\](https://img.shields.io/github/stars/salt-ui/saltui.svg?label=\&style =social)](https://github.com/salt-ui/saltui) - 簡潔的移動UI組件庫
* [Seek Style](https://seek-oss.github.io/seek-style-guide) [!\[Repo Star\](https://img.shields.io/github/stars/seek-oss/seek -style-guide.svg?label=\&style=social)](https://github.com/seek-oss/seek-style-guide) - SEEK 的生活方式指南，由 React、webpack、CSS 模塊和 Less 提供支持.
* [語義 UI React](https://react.semantic-ui.com/) [!\[Repo Star\](https://img.shields.io/github/stars/Semantic-Org/Semantic-UI-React .svg?label=\&style=social)](https://github.com/Semantic-Org/Semantic-UI-React)- Semantic UI React 是 Semantic UI 的官方 React 集成。Netflix、亞馬遜和其他主要組織都在使用它。示例可以在 [這裡](https://github.com/Semantic-Org/Semantic-UI-React/tree/master/examples) 找到
* [Shards](https://designrevision.com/docs/shards-react/) [!\[Repo Star\](https://img.shields.io/github/stars/designrevision/shards-react.svg?label =\&style=social)](https://github.com/designrevision/shards-react) - Shards React 是基於 [Shards](https://designrevision.com/downloads/) 的免費、美觀且現代的 React UI 工具包碎片/)
* [平滑 UI](https://smooth-ui.smooth-code.com/) [!\[Repo Star\](https://img.shields.io/github/stars/smooth-code/smooth-ui. svg?label=\&style=social)](https://github.com/smooth-code/smooth-ui) - Smooth UI 是 React 的樣式系統/UI 庫。它適用於樣式化組件
* [小吃](https://instacart.github.io/Snacks/) [![Repo Star](https://img.shields.io/github/stars/instacart/Snacks.svg?label=\&style=social)](https://github.com/instacart/Snacks) - Snacks 是一個基於 JavaScript 和 React 的組件庫。它有一個與 Instacart 風格相匹配的默認主題。
* [Spark](https://sparkdesignsystem.com/) [![Repo Star](https://img.shields.io/github/stars/sparkdesignsystem/spark-design-system.svg?label=\&style=social)](https://github.com/sparkdesignsystem/spark-design-system) - Spark 設計系統是一個模式和組件系統，用於為 Quicken Loans 金融科技產品系列創建用戶界面。
* [星塵用戶界面](https://stardust-ui.github.io/react/) [!\[Repo Star\](https://img.shields.io/github/stars/stardust-ui/react.svg? label=\&style=social)](https://github.com/stardust-ui/react) - Stardust 是一套用於構建 UI 庫的規範和工具。它基於 \[Semantic UI React (SUIR)] (<https://github.com/Semantic-Org/Semantic-UI-React>) 的一個分支。
* [Shineout](https://sheinsight.github.io/shineout/1.1.x/#/) [!\[Repo Star\](https://img.shields.io/github/stars/sheinsight/shineout.svg ?label=\&style=social)](https://github.com/sheinsight/shineout) - 支持 i18n 的 React 主題組件庫。
* [Tenon-UI](https://www.tenon-ui.info/) [!\[Repo Star\](https://img.shields.io/github/stars/tenon-io/tenon-ui.svg ?label=\&style=social)](https://github.com/tenon-io/tenon-ui) - 適合想要構建包容性和可訪問性網站的 React 開發人員的首選庫。推薦用於可訪問性 (a11y)。
* [UIW](https://uiwjs.github.io) [![Repo Star](https://img.shields.io/github/stars/uiwjs/uiw.svg?label=\&style=social)](https://github.com/uiwjs/uiw) - 一個高質量的 UI 工具包，一個 React 16+ 的組件庫
* [UXCore](http://uxco.re/) \[![Repo Star](https://img.shields.io/github/stars/uxcore/uxcore.svg?label=\&style=social)]\(https ://github.com/uxcore/uxcore) - 阿里巴巴公司為企業應用而生的 React UI 組件套件。
* [YamUI](https://microsoft.github.io/YamUI/) [![Repo Star](https://img.shields.io/github/stars/Microsoft/YamUI.svg?label=\&style=social)](https://github.com/Microsoft/YamUI) - Yammer.com 的可重用組件框架，它是在 Office UI Fabric 組件之上使用 React 構建的
* [Uniform](http://uniform.hudl.com/) - Uniform 是 Hudl 的設計系統。它的存在是為了通過設計和代碼實現來統一 Hudl 的產品。
* [VTEX 風格指南](https://styleguide.vtex.com/) [![Repo Star](https://img.shields.io/github/stars/vtex/styleguide.svg?label=\&style=social) ](https://github.com/vtex/styleguide)- React 組件庫支持的 VTEX 設計系統
* [Yep-React](https://yep-react.jd.com/) [!\[Repo Star\](https://img.shields.io/github/stars/jdf2e/yep-react.svg?label =\&style=social)](https://github.com/jdf2e/yep-react) - 基於React v16的前端UI組件庫，用於移動頁面的快速開發
* [Zent](https://youzan.github.io/zent/en/guides/install) [!\[Repo Star\](https://img.shields.io/github/stars/youzan/zent.svg? label=\&style=social)](https://github.com/youzan/zent) - Zent 是有贊開發和使用的 React 組件庫，目前有 50 多個組件。
* [Zero-UI](https://alphago88.github.io/Zero-UI/) [!\[Repo Star\](https://img.shields.io/github/stars/AlphaGo88/Zero-UI.svg ?label=\&style=social)](https://github.com/AlphaGo88/Zero-UI) - Zero-UI 是一個易於使用的 Web UI 組件框架，其中包含一組有用的組件。
* [ZHUI](https://zhui-team.github.io/zhui/) [!\[Repo Star\](https://img.shields.io/github/stars/zhui-team/zhui.svg?label =\&style=social)](https://github.com/zhui-team/zhui) - React 驅動的中國風格組件庫
* `[付費]`[Essential JS 2 for React by Syncfusion](https://www.syncfusion.com/react-ui-components) - 超過 60 個用於 React 的高性能、輕量級、模塊化和響應式 UI 組件。
* `[付費]`[ExtReact](https://www.sencha.com/products/extreact/) [!\[Repo Star\](https://img.shields.io/github/stars/sencha/ext- react.svg?label=\&style=social)](https://github.com/sencha/ext-react) - 來自 Sencha UI 的 115 多個預構建的 UI 組件，這些組件完全受支持並旨在交互和協同工作
* `[付費]`[jQWidgets](https://www.jqwidgets.com/react/) - 基於 jqwidgets 的 React 組件。
* `[付費]`[KendoReact](https://www.telerik.com/kendo-react-ui/) - 為 React 從頭開始構建的 90 多個專業 UI 組件 - 響應迅速、可訪問且功能豐富。
* `[付費]`[Mobiscroll](https://mobiscroll.com/react) - 移動 UI 控件的 React 組件。
* `[付費]`[Wijmo React](https://www.grapecity.com/en/react/) - 來自葡萄城的 Wizmo 工具包的 React 組件。
* [React tsParticles](https://github.com/matteobruni/tsparticles) - React 組件，可輕鬆將完全可定制的粒子動畫添加到網站和 Web 應用程序

### 特殊用例庫

* [鹵素](https://github.com/yuanyan/halogen) [![Repo Star](https://img.shields.io/github/stars/yuanyan/halogen.svg?label=\&style=social) ](https://github.com/yuanyan/halogen)- 使用 React.js 加載微調器的集合
* [Nivo](https://nivo.rocks/) \[![Repo Star](https://img.shields.io/github/stars/plouc/nivo.svg?label=\&style=social)]\(https ://github.com/plouc/nivo) - Nivo 提供了一組豐富的 dataviz 組件，構建在很棒的 d3 和 Reactjs 庫之上。
* [Recharts](http://recharts.org) \[![Repo Star](https://img.shields.io/github/stars/recharts/recharts.svg?label=\&style=social)]\(https: //github.com/recharts/recharts) - 重新定義了用 D3 構建的圖表庫組件
* [React CSS 加載器](https://lucasbassetti.com.br/react-css-loaders/) [!\[Repo Star\](https://img.shields.io/github/stars/LucasBassetti/react-css -loaders.svg?label=\&style=social)](https://github.com/LucasBassetti/react-css-loaders) - 純 CSS React 加載組件的集合
* [React Epic Spinners](https://bondz.github.io/react-epic-spinners/) [!\[Repo Star\](https://img.shields.io/github/stars/bondz/react-epic -spinners.svg?label=\&style=social)](https://github.com/bondz/react-epic-spinners) - 用於微調器的可重用反應組件
* [React Virtualized](https://bvaughn.github.io/react-virtualized/) [!\[Repo Star\](https://img.shields.io/github/stars/bvaughn/react-virtualized.svg? label=\&style=social)](https://github.com/bvaughn/react-virtualized) - 用於虛擬化大型數據集以高效呈現列表和表格數據的 React 組件
* [ReactGrid](https://reactgrid.com/) \[![Repo Star](https://img.shields.io/github/stars/silevis/reactgrid.svg?label=\&style=social)]\(https ://github.com/silevis/reactgrid) - 向您的 React 應用程序添加類似電子表格的行為
* [樣式圖標](https://styled-icons.js.org/) [!\[Repo Star\](https://img.shields.io/github/stars/jacobwgillespie/styled-icons.svg?label= \&style=social)](https://github.com/jacobwgillespie/styled-icons) - Font Awesome、Feather、Material Design 和 Octicons 圖標包作為樣式組件
* `[付費]` [ag-grid](https://www.ag-grid.com/) - 網格/表格的跨平台組件

＃＃＃ 工具

[Bit](https://github.com/teambit/bit) \[![Repo Star](https://img.shields.io/github/stars/teambit/bit.svg?label=\&style=social)] (teambit/bitp) — 端到端組件共享和管理。它負責在您的庫中開發和發布組件（自動依賴解析、版本控制等），使它們每個都可以在任何地方單獨使用和開發，因此團隊可以大規模管理和共享組件。

[react-sketchapp](http://airbnb.io/react-sketchapp/) [!\[Repo Star\](https://img.shields.io/github/stars/airbnb/react-sketchapp.svg?label= \&style=social)](https://github.com/airbnb/react-sketchapp) — 將 React 組件渲染到 Sketch；為設計系統量身定制

### 相關社區列表

* [Awesome React](https://github.com/enaqx/awesome-react) - 關於 React 生態系統的一些很棒的東西的集合。
* [Awesome React 組件](https://github.com/brillout/awesome-react-components) - React 組件和庫目錄
* [libreact](https://github.com/streamich/libreact) [![Repo Star](https://img.shields.io/github/stars/streamich/libreact.svg?label=\&style=social) ](https://github.com/streamich/libreact)- 有用的 React 組件的集合

***

## VueJS

* [AgnosticUI](https://www.agnosticui.com/) - 可訪問的 Vue 3 組件基元（也適用於 Svelte、React 和 Angular）。
* [AT-UI](https://at.aotu.io/) [!\[Repo Star\](https://img.shields.io/github/stars/at-ui/at-ui.svg?label =\&style=social)](https://github.com/at-ui/at-ui) - 一個清新扁平的 UI-Kit 專門用於桌面應用
* [BalmUI](https://material.balmjs.com/#/) [!\[Repo Star\](https://img.shields.io/github/stars/balmjs/ui-vue.svg?label=\&style =social)](https://github.com/balmjs/ui-vue) - Vue.js 的下一代 Material UI
* [Bootstrap Vue](https://bootstrap-vue.js.org/) [!\[Repo Star\](https://img.shields.io/github/stars/bootstrap-vue/bootstrap-vue.svg? label=\&style=social)](https://github.com/bootstrap-vue/bootstrap-vue) - Vue.js 的 Bootstrap 4 組件和網格系統的全面實現，以及廣泛和自動化的 WAI-ARIA 可訪問性標記。
* [Buefy](https://buefy.github.io/) \[![Repo Star](https://img.shields.io/github/stars/buefy/buefy.svg?label=\&style=social)] (<https://github.com/buefy/buefy>) - 基於 Bulma 的 Vue.js 輕量級 UI 組件，這是該庫僅有的兩個內部依賴項
* [CarvueJS](https://carvuejs.github.io/home) [!\[Repo Star\](https://img.shields.io/github/stars/CarvueJS/carbon-components-vue.svg?label= \&style=social)](https://github.com/CarvueJS/carbon-components-vue) - Carvue 是一個基於 Carbon-Design 和 VueJS 的 UI 組件庫。
* [Cion](https://cion.visualjerk.de/) [!\[Repo Star\](https://img.shields.io/github/stars/visualjerk/vue-cion-design-system.svg?label =\&style=social)](https://github.com/visualjerk/vue-cion-design-system) - CION 是一個主要為 Vue.js 應用程序構建的設計系統。您可以將其用作構建自己的設計系統的起點。
* [Cube UI](https://didi.github.io/cube-ui/#/en-US) [!\[Repo Star\](https://img.shields.io/github/stars/didi/cube -ui.svg?label=\&style=social)](https://github.com/didi/cube-ui) - cube-ui 是一個移動應用的UI組件庫
* [元素](https://element.eleme.io/) \[![Repo Star](https://img.shields.io/github/stars/ElemeFE/element.svg?label=\&style=social)] (<https://github.com/ElemeFE/element>) - 庫提供豐富的可定制組件選擇以及基於 Vue 2.0 的完整樣式指南
* [企業用戶界面](https://baidu-design.github.io/development/veui) [!\[Repo Star\](https://img.shields.io/github/stars/ecomfe/veui.svg?label =\&style=social)](https://github.com/ecomfe/veui) - Vue.js 的企業 UI。基於百度公司的 ONE DESIGN。
* [Fish-UI](https://myliang.github.io/fish-ui/) [!\[Repo Star\](https://img.shields.io/github/stars/myliang/fish-ui.svg ?label=\&style=social)](https://github.com/myliang/fish-ui) - 提供了一個基於 Vue 的 Web 工具包，帶有整潔的組件。該庫支持 ES2015 + Webpack 工作流程
* [Framevuerk](https://framevuerk.com/) \[![Repo Star](https://img.shields.io/github/stars/framevuerk/framevuerk.svg?label=\&style=social)]\(https ://github.com/framevuerk/framevuerk) - 基於 Vue.js 的響應式、多語言、雙向支持和可配置的 UI 框架
* [Framework 7 Vue](https://framework7.io/vue/) [![Repo Star](https://img.shields.io/github/stars/nolimits4web/framework7.svg?label=\&style=social)](https://github.com/nolimits4web/framework7/) - 用於構建 iOS 和 Android 應用程序的全功能 HTML 框架
* [HEYUI](https://www.heyui.top/en) [![Repo Star](https://img.shields.io/github/stars/heyui/heyui.svg?label=\&style=social) ](https://github.com/heyui/heyui)- Vue2.0 的 UI 工具包，將 cli 和 utils 作為生態系統的一部分
* [iView](https://iviewui.com/) \[![Repo Star](https://img.shields.io/github/stars/iview/iview.svg?label=\&style=social)]\(https ://github.com/iview/iview) - iView 提供了數十個使用 Vue.js 構建的 UI 組件和小部件，並採用簡潔優雅的設計
* [JSmod Vue](http://jsmod-vue.tedfe.com/) [!\[Repo Star\](https://img.shields.io/github/stars/chaogao/jsmod-pc-vue.svg? label=\&style=social)](https://github.com/chaogao/jsmod-pc-vue) - jsmod的目標是提供高自由度（高擴展性）的ui組件，統一桌面和移動使用
* [Keen-UI](https://josephuspaye.github.io/Keen-UI) [!\[Repo Star\](https://img.shields.io/github/stars/JosephusPaye/Keen-UI.svg? label=\&style=social)](https://github.com/JosephusPaye/Keen-UI) - 敏銳的 UI 是受材料設計啟發的 Vue 組件的集合，但並不意味著是材料設計的完整實現規格。
* [Mand Mobile 2](https://mand-mobile.github.io/2x-doc/) [!\[Repo Star\](https://img.shields.io/github/stars/didi/mand-mobile .svg?label=\&style=social)](https://github.com/didi/mand-mobile) - 基於 Vue.js 2 的移動 UI 工具包，專為金融場景設計。
* [Material Components Vue](https://matsp.github.io/material-components-vue/) [!\[Repo Star\](https://img.shields.io/github/stars/matsp/material-components -vue.svg?label=\&style=social)](https://github.com/matsp/material-components-vue) - Material-components-vue 集成了 mdc-web (by google) vanilla 組件
* [MDBootstrap](http://mdbootstrap.com/material-design-for-bootstrap/) [!\[Repo Star\](https://img.shields.io/github/stars/mdbootstrap/Vue-Bootstrap-with -Material-Design.svg?label=\&style=social)](https://github.com/mdbootstrap/Vue-Bootstrap-with-Material-Design) - 基於 Bootstrap 4 的 Material Design UI KIT
* [Mint UI](http://mint-ui.github.io/#!/en) [!\[Repo Star\](https://img.shields.io/github/stars/ElemeFE/mint-ui. svg?label=\&style=social)](https://github.com/ElemeFE/mint-ui/) - Vue.js 的移動 UI 元素
* [Muse UI](https://muse-ui.org/) [!\[Repo Star\](https://img.shields.io/github/stars/museui/muse-ui.svg?label=\&style= social)](https://github.com/museui/muse-ui) - Muse UI 有 40 多個 UI 組件和可自定義的主題，用於 Google 的 Material Design
* [NutUI](https://nutui.jd.com/) \[![Repo Star](https://img.shields.io/github/stars/jdf2e/nutui.svg?label=\&style=social)] (<https://github.com/jdf2e/nutui>) - 一套京東風格的輕量級移動Vue組件庫
* [N3 組件](https://n3-components.github.io/N3-components/) [!\[Repo Star\](https://img.shields.io/github/stars/N3-components/N3- components.svg?label=\&style=social)](https://github.com/N3-components/N3-components) - N3 組件庫是用 Vue.js 構建的，是前端或全棧工程師的強大庫快速建立網頁
* [Office UI Fabric Vue](https://aidewoode.github.io/office-ui-fabric-vue/) [!\[Repo Star\](https://img.shields.io/github/stars/aidewoode/ office-ui-fabric-vue.svg?label=\&style=social)](https://github.com/aidewoode/office-ui-fabric-vue) - Vue.js 的 Office UI Fabric 實現，使用 office- 構建ui-fabric-js
* [溫泉用戶界面](https://onsen.io/vue/) [![Repo Star](https://img.shields.io/github/stars/OnsenUI/OnsenUI.svg?label=\&style=social) ](https://github.com/OnsenUI/OnsenUI)- 100多個組件是基於原始Onsen UI框架專門為Material和Flat設計製作的
* [ProtoVue](https://github.com/v1Labs/protovue) [![Repo Star](https://img.shields.io/github/stars/v1Labs/protovue.svg?label=\&style=social) ](https://github.com/v1Labs/protovue)- 為 Vue.js 從網格到 UI 元素構建的原型組件庫
* [Quasar](https://quasar-framework.org/) \[![Repo Star](https://img.shields.io/github/stars/quasarframework/quasar.svg?label=\&style=social)] (<https://github.com/quasarframework/quasar>) - 響應式單頁應用程序、服務器端渲染應用程序、漸進式 Web 應用程序、混合移動應用程序（看起來很原生！）和具有主題支持的電子應用程序。
* [Rubik UI](https://ccforward.github.io/rubik/#/) [!\[Repo Star\](https://img.shields.io/github/stars/ccforward/rubik.svg?label= \&style=social)](https://github.com/ccforward/rubik/) - Rubik UI 是一個基於 Vue.js 2.0+ 的 Material Design 風格的 ui 庫，可用於 PC 和移動設備。
* [語義 UI Vue](https://semantic-ui-vue.github.io/) [!\[Repo Star\](https://img.shields.io/github/stars/Semantic-UI-Vue/Semantic -UI-Vue.svg?label=\&style=social)](https://github.com/Semantic-UI-Vue/Semantic-UI-Vue) - Semantic UI Vue 是 Semantic UI 的官方 VueJS 集成。它被使用由 Netflix、亞馬遜和其他主要組織提供。
* [SemVue](https://guilhermewaess.github.io/SemVue) [![Repo Star](https://img.shields.io/github/stars/guilhermewaess/SemVue.svg?label=\&style=social) ](https://github.com/guilhermewaess/SemVue)- 在您的 vue 項目中輕鬆使用語義 UI 組件
* [Space-kit](https://space-kit.netlify.com) [!\[Repo Star\](https://img.shields.io/github/stars/apollographql/space-kit.svg?label= \&style=social)](https://github.com/apollographql/space-kit) - 作為 Apollo 設計系統的基地，Space Kit 為開發人員在 Apollo 品牌界面中使用提供了必要的設計資源。
* [UI](https://vuejs.github.io/ui) [![Repo Star](https://img.shields.io/github/stars/vuejs/ui.svg?label=\&style=social) ](https://github.com/vuejs/ui)- 官方 Vue 組織應用程序的 UI 組件
* [Uiv](https://uiv.wxsm.space/) \[![Repo Star](https://img.shields.io/github/stars/wxsms/uiv.svg?label=\&style=social)] (<https://github.com/wxsms/uiv>) - Uiv 是 Vue 2 的 Bootstrap 3 組件庫。所有組件組合約為 20KB，唯一的外部依賴項是 Vue 和 Bootstrap CSS
* [Vant](https://youzan.github.io/vant) [![Repo Star](https://img.shields.io/github/stars/youzan/vant.svg?label=\&style=social) ](https://github.com/youzan/vant)- 基於 Vue 構建的輕量級移動 UI 組件
* [Vuetify](https://vuetifyjs.com/) \[![Repo Star](https://img.shields.io/github/stars/vuetifyjs/vuetify.svg?label=\&style=social)]\(https ://github.com/vuetifyjs/vuetify) - 根據 Google 的材料設計指南實現的 Vue.js 組件。Vuetify 支持跨平台的所有現代瀏覽器，包括 IE11 和 Safari 9+
* [Vueblu](https://github.com/chenz24/vue-blu) [!\[Repo Star\](https://img.shields.io/github/stars/chenz24/vue-blu.svg?label= \&style=social)](https://github.com/chenz24/vue-blu) - 基於 Vue.js(2.x) 和 Bulma 的 UI 組件庫
* [Vuecidity](https://vuecidity.wemakesites.net/) - 受 Google Material Design 和 Bootstrap 啟發的組件庫，包含 30 多個 UI 組件、24 列響應式佈局網格系統。
* [Vuedarkmode](https://www.vuedarkmode.com/) \[![Repo Star](https://img.shields.io/github/stars/LeCoupa/vuedarkmode.svg?label=\&style=social)] (<https://github.com/LeCoupa/vuedarkmode>) - 一組極簡主義的組件，專為像我們一樣喜歡黑暗界面的失眠症患者而設計。
* [VueFace](https://sudheerj.github.io/vueface/#/) [!\[Repo Star\](https://img.shields.io/github/stars/sudheerj/vueface.svg?label=\&style =social)](https://github.com/sudheerj/vueface) - VueJS 框架的組件庫，包含大約​​ 40 個組件，支持 20 多個主題。
* [Vue Bulma](https://github.com/vouill/vue-bulma-components) [!\[Repo Star\](https://img.shields.io/github/stars/vouill/vue-bulma-components .svg?label=\&style=social)](https://github.com/vouill/vue-bulma-components) - 將 Bulma css api 翻譯成 vue 組件
* [Vue Carbon](http://www.myronliu.com/vue-carbon) [!\[Repo Star\](https://img.shields.io/github/stars/myronliu347/vue-carbon.svg?label =\&style=social)](https://github.com/myronliu347/vue-carbon) - Material design style 移動端UI庫，設計資源參考[FrameWork7](https://github.com/framework7io/framework7)
* [Vue Material](https://vuematerial.io/) [![Repo Star](https://img.shields.io/github/stars/vuematerial/vue-material.svg?label=\&style=social) ](https://github.com/vuematerial/vue-material)- 實現谷歌材料設計的庫。該庫還提供了一個 webpack 樣板、Nuxt.js 的 SSR 模板和一個 HTML 文件以從框架開始
* [Vue Native](https://vue-native.io/) [!\[Repo Star\](https://img.shields.io/github/stars/GeekyAnts/vue-native-core.svg?label= \&style=social)](https://github.com/GeekyAnts/vue-native-core) - Vue Native 是一個使用 JavaScript 構建跨平台原生移動應用程序的框架
* [Vue MDC 適配器](https://stasson.github.io/vue-mdc-adapter/#/) [!\[Repo Star\](https://img.shields.io/github/stars/stasson/vue -mdc-adapter.svg?label=\&style=social)](https://github.com/stasson/vue-mdc-adapter) - 為 Vue.js 集成材料組件，遵循 Google 推薦的最佳實踐
* [Vue MDC](https://github.com/posva/vue-mdc) [!\[Repo Star\](https://img.shields.io/github/stars/posva/vue-mdc.svg?label =\&style=social)](https://github.com/posva/vue-mdc) - 這是對 Vue.js 的 Material Components web 的改編
* [Vue YDUI](http://vue.ydui.org/) [!\[Repo Star\](https://img.shields.io/github/stars/ydcss/vue-ydui.svg?label=\&style= social)](https://github.com/ydcss/vue-ydui) - 帶有 Vue2.js 的移動組件庫
* [Vuido](https://vuido.mimec.org/) \[![Repo Star](https://img.shields.io/github/stars/mimecorg/vuido.svg?label=\&style=social)] (<https://github.com/mimecorg/vuido>) - 使用 Vue.js 的本機桌面應用程序。
* [Vuikit](https://vuikit.js.org/) \[![Repo Star](https://img.shields.io/github/stars/vuikit/vuikit.svg?label=\&style=social)] (<https://github.com/vuikit/vuikit>) - 一個響應式 Vue 2 UI 庫，用於基於 UIkit 3 框架的網站界面。
* [Vux](https://vux.li/) \[![Repo Star](https://img.shields.io/github/stars/airyland/vux.svg?label=\&style=social)]\(https ://github.com/airyland/vux) - 基於WeUI的移動UI組件
* [v-semantic](https://github.com/eddow/v-semantic) [!\[Repo Star\](https://img.shields.io/github/stars/eddow/v-semantic.svg? label=\&style=social)](https://github.com/eddow/v-semantic) - semantic-ui2 與 vue.js2 的集成。
* [vue-antd](http://okoala.github.io/vue-antd) [!\[Repo Star\](https://img.shields.io/github/stars/okoala/vue-antd.svg? label=\&style=social)](https://github.com/okoala/vue-antd) - 這裡是 Ant Design 的 Vue 實現，開發和服務於企業後端產品。
* [vue-beauty](https://fe-driver.github.io/vue-beauty/) [!\[Repo Star\](https://img.shields.io/github/stars/FE-Driver/vue -beauty.svg?label=\&style=social)](https://github.com/FE-Driver/vue-beauty) - 使用 vue 和 ant 設計構建的 UI 組件
* [vuestrap-base-components](http://kzima.github.io/vuestrap-base-components/#/) [!\[Repo Star\](https://img.shields.io/github/stars/kzima /vuestrap-base-components.svg?label=\&style=social)](https://github.com/kzima/vuestrap-base-components) - Vuestrap 基礎組件擴展了 Bootstrap 4。使用 vuestrap、純 Vue.js 和網頁包。
* [VueBoot](http://morgul.github.io/vueboot/) [![Repo Star](https://img.shields.io/github/stars/Morgul/vueboot.svg?label=\&style=social)](https://github.com/Morgul/vueboot) - 使用 Bootstrap v4 編寫的 Vuejs 組件和指令，利用官方的 Bootstrap JS。
* [Vuesax](https://lusaxweb.github.io/vuesax/) [![Repo Star](https://img.shields.io/github/stars/lusaxweb/vuesax.svg?label=\&style=social)](https://github.com/lusaxweb/vuesax) - Vuesax 是一個 Vuejs 組件庫，可促進前端開發並以出色的視覺質量簡化工作。
* [VueStrap](https://wffranco.github.io/vue-strap/) [!\[Repo Star\](https://img.shields.io/github/stars/wffranco/vue-strap.svg?label =\&style=social)](https://github.com/wffranco/vue-strap) - 一組基於 Bootstrap 的標記和 CSS 的原生 Vue.js 組件。不依賴 jQuery 或 Bootstrap 的 JavaScript。
* [WDUI](https://wdfe.github.io/wdui) [![Repo Star](https://img.shields.io/github/stars/wdfe/wdui.svg?label=\&style=social) ](https://github.com/wdfe/wdui)- 基於 Vue 2.0 快速構建應用佈局的輕量級移動 UI 控件庫
* [Zircle UI](https://zircleui.github.io/docs/?utm_source=zircle) [!\[Repo Star\](https://img.shields.io/github/stars/zircleUI/zircleUI.svg? label=\&style=social)](https://github.com/zircleUI/zircleUI) - 開發可縮放用戶界面的前端庫
* `[付費]`[Syncfusion 的 Vue 必備 JS 2](https://www.syncfusion.com/vue-ui-components) - 超過 60 個用於 Vue 的高性能、輕量級、模塊化和響應式 UI 組件。
* [Particles.vue](https://github.com/matteobruni/tsparticles) - Vue 庫，可輕鬆將完全可自定義的粒子動畫添加到網站和 Web 應用程序。
* `[付費]`[Kendo UI for Vue](https://www.telerik.com/kendo-vue-ui) - 一套專注於業務應用程序的 UI 組件，包含數據網格等組件

### 特殊用例庫

* [Epic Spinners](https://epic-spinners.epicmax.co/#/) [!\[Repo Star\](https://img.shields.io/github/stars/epicmaxco/epic-spinners.svg? label=\&style=social)](https://github.com/epicmaxco/epic-spinners) - 用於微調器的可重用 Vue 組件
* `[付費]`[jQWidgets](https://www.jqwidgets.com/vue-js-ui-components-for-jqwidgets/) - 基於 jqwidgets 的 Vue 組件。

### 相關社區列表

* [Awesome Vue](https://github.com/vuejs/awesome-vue) - 與 Vue.js 相關的精彩內容的精選列表

***

## 反應原生

* [Ant Design Mobile RN](https://rn.mobile.ant.design/) [!\[Repo Star\](https://img.shields.io/github/stars/ant-design/ant-design- mobile-rn.svg?label=\&style=social)](https://github.com/ant-design/ant-design-mobile-rn) - 基於 React Native 的基於 Ant 設計的可配置移動 UI 組件庫
* [Blankapp](https://blankapp.org/) \[![Repo Star](https://img.shields.io/github/stars/blankapp/ui.svg?label=\&style=social)]\(https ://github.com/blankapp/ui) - React Native 的高度可定制和主題化組件
* [Carbon Native](https://getcarbonnative.com/) [!\[Repo Star\](https://img.shields.io/github/stars/carbon-native/carbon-native.svg?label=\&style= social)](https://github.com/carbon-native/carbon-native) - 一組用於構建 React Native 應用程序的 UI 組件。
* [Nachos UI](https://avocode.com/nachos-ui/) [!\[Repo Star\](https://img.shields.io/github/stars/nachos-ui/nachos-ui.svg? label=\&style=social)](https://github.com/nachos-ui/nachos-ui) - 可定制的準備使用 30 多個可與 \[React Native for Web] 配合使用的組件(<https://github.com/> necolas/react-native-web)
* [NativeBase](https://nativebase.io/) \[![Repo Star](https://img.shields.io/github/stars/GeekyAnts/NativeBase.svg?label=\&style=social)]\(https ://github.com/GeekyAnts/NativeBase) - React Native 的基本跨平台 UI 組件。對於 React Native 愛好者來說是同類中最好的之一。受到推崇的！
* [Panza](https://github.com/panza-org/panza) [!\[Repo Star\](https://img.shields.io/github/stars/panza-org/panza.svg?label= \&style=social)](https://github.com/panza-org/panza) - Panza 是用於 react-native 的無狀態、功能性 ui 組件的集合，並深受優秀的 rebass 庫的啟發。
* [React Native Android 工具包](https://github.com/adbayb/react-native-android-kit) [!\[Repo Star\](https://img.shields.io/github/stars/adbayb/react -native-android-kit.svg?label=\&style=social)](https://github.com/adbayb/react-native-android-kit) - 一組用於 React Native 框架的原生 Android UI 組件和模塊React Native 核心團隊目前沒有實現
* [React Native Common](https://rghorbani.github.io/react-native-common/) [!\[Repo Star\](https://img.shields.io/github/stars/rghorbani/react-native -common.svg?label=\&style=social)](https://github.com/rghorbani/react-native-common) - 跨平台 React Native UI 工具包和 API
* [React Native Elements](https://react-native-training.github.io/react-native-elements) [!\[Repo Star\](https://img.shields.io/github/stars/react- native-training/react-native-elements.svg?label=\&style=social)](https://github.com/react-native-training/react-native-elements) - 跨平台 React Native UI 工具包。支持自定義並提供用於在 React Native 中創建應用程序的多合一 UI 工具包
* [React Native Gifted Chat](https://github.com/wix/react-native-gifted-chat) [!\[Repo Star\](https://img.shields.io/github/stars/wix/react -native-gifted-chat.svg?label=\&style=social)](https://github.com/wix/react-native-gifted-chat) - React Native 的聊天 UI 組件（以前稱為 Gifted Messenger）
* [React Native Material Design](http://react-native-material-design.github.io/) [!\[Repo Star\](https://img.shields.io/github/stars/react-native- material-design/react-native-material-design.svg?label=\&style=social)](https://github.com/react-native-material-design/react-native-material-design) - React Native 組件實現材料設計。（不再維護有利於材料紙）
* [React Native Material Kit](http://xinthink.github.io/react-native-material-kit/) [!\[Repo Star\](https://img.shields.io/github/stars/xinthink/ react-native-material-kit.svg?label=\&style=social)](https://github.com/xinthink/react-native-material-kit) - 一套UI組件，目的是介紹Material Design使用 React Native 構建的應用程序
* [React Native Material UI](https://github.com/xotahal/react-native-material-ui) [!\[Repo Star\](https://img.shields.io/github/stars/xotahal/react -native-material-ui.svg?label=\&style=social)](https://github.com/xotahal/react-native-material-ui) - React Native 的高度可定制的材料設計組件。這個工具包的演示可以看到[這裡](https://github.com/xotahal/react-native-material-ui/blob/master/docs/Demo.md)
* [React Native 論文](https://callstack.github.io/react-native-paper/) [!\[Repo Star\](https://img.shields.io/github/stars/callstack/react-native -paper.svg?label=\&style=social)](https://github.com/callstack/react-native-paper) - 組件遵循材料設計指南 v2.0，更好的 RTL 支持和完整的主題選項
* [React Native UI Kitten](https://akveo.github.io/react-native-ui-kitten/#/home) [!\[Repo Star\](https://img.shields.io/github/stars /akveo/react-native-ui-kitten.svg?label=\&style=social)](https://github.com/akveo/react-native-ui-kitten) - 具有易於定制的元素的移動框架，能夠創建您最常使用的組件的樣式配置（按鈕、輸入等）
* [React Native UI 庫](https://wix.github.io/react-native-ui-lib/) [!\[Repo Star\](https://img.shields.io/github/stars/wix/ react-native-ui-lib.svg?label=\&style=social)](https://github.com/wix/react-native-ui-lib) - React Native 的 UI 工具集和組件庫
* [React Native Web](http://necolas.github.io/react-native-web/examples/) [!\[Repo Star\](https://img.shields.io/github/stars/necolas/react -native-web.svg?label=\&style=social)](https://github.com/necolas/react-native-web) - “React Native for Web”使得在網絡上運行 React Native 組件和 API 成為可能使用 React DOM 的網頁
* [React Virgin](https://trixieapp.github.io/react-virgin/) [!\[Repo Star\](https://img.shields.io/github/stars/Trixieapp/react-virgin.svg? label=\&style=social)](https://github.com/Trixieapp/react-virgin) - 帶有樣板的 UI 套件，用於您的 React-Native 項目
* [Shoutem UI](https://shoutem.github.io/docs/ui-toolkit/introduction) [!\[Repo Star\](https://img.shields.io/github/stars/shoutem/ui.svg ?label=\&style=social)](https://github.com/shoutem/ui) - 適用於 iOS 和 Android 的 React Native 應用程序的可樣式化組件。我們所有的組件都是可組合和可定制的。
* [Teaset](https://github.com/rilyu/teaset) [![Repo Star](https://img.shields.io/github/stars/rilyu/teaset.svg?label=\&style=social) ](https://github.com/rilyu/teaset)- React Native 的 UI 庫，提供 20+ 純 JS(ES6) 組件，專注於內容展示和動作控制。

### 特殊用例庫

* [React Native 日曆](https://github.com/wix/react-native-calendars) [!\[Repo Star\](https://img.shields.io/github/stars/wix/react-native- calendars.svg?label=\&style=social)](https://github.com/wix/react-native-calendars) - 各種可定制的反應原生日曆組件。
* [React Native 圖表](https://github.com/tomauty/react-native-chart) [!\[Repo Star\](https://img.shields.io/github/stars/tomauty/react-native- chart.svg?label=\&style=social)](https://github.com/tomauty/react-native-chart) - 將折線圖、面積圖、餅圖和條形圖添加到您的 React Native 應用程序
* [React Native 循環進度](https://github.com/bartgryszko/react-native-circular-progress) [!\[Repo Star\](https://img.shields.io/github/stars/bartgryszko/react -native-circular-progress.svg?label=\&style=social)](https://github.com/bartgryszko/react-native-circular-progress) - 使用 ReactART 創建動畫循環進度的 React Native 組件
* [React Native Spinkit](https://github.com/maxs15/react-native-spinkit) [!\[Repo Star\](https://img.shields.io/github/stars/maxs15/react-native- spinkit.svg?label=\&style=social)](https://github.com/maxs15/react-native-spinkit) - React Native 的動畫加載指示器集合

### 相關社區列表

* [Native Directory](https://native.directory) - Native Directory 是 React Native 庫的精選列表，可幫助您構建項目。
* [Awesome React Native](https://github.com/jondot/awesome-react-native) - 很棒的 React Native 組件、新聞、工具和學習資料！

***

## 角度

* [AgnosticUI](https://www.agnosticui.com/) - 可訪問的 Angular 組件基元（也適用於 Svelte、React 和 Vue 3）。
* [Alfresco](https://alfresco.github.io/adf-component-catalog/) [!\[Repo Star\](https://img.shields.io/github/stars/Alfresco/alfresco-ng2-components .svg?label=\&style=social)](https://github.com/Alfresco/alfresco-ng2-components) - Alfresco 應用程序開發框架 (ADF) 是一組帶有指令、管道和其他接口的 Angular 組件。應視為框架。
* [Alyle UI](https://alyle-ui.firebaseapp.com/) [!\[Repo Star\](https://img.shields.io/github/stars/Alyle/Alyle-UI.svg?label= \&style=social)](https://github.com/Alyle/Alyle-UI) - 極簡設計，一組 Angular 組件。
* [AT Angular UI](http://ng-at.thunderjava.com/) [!\[Repo Star\](https://img.shields.io/github/stars/100cm/at-ui-angular.svg ?label=\&style=social)](https://github.com/100cm/at-ui-angular) - 基於PC網站後端產品快速開發的Angular 4.0+前端UI組件庫。
* [Clarity](https://vmware.github.io/clarity/) [![Repo Star](https://img.shields.io/github/stars/vmware/clarity.svg?label=\&style=social)](https://github.com/vmware/clarity) - Clarity 是 VMware 的一個開源設計系統，它匯集了 UX 指南、HTML/CSS 框架和 Angular 組件
* [共價](https://teradata.github.io/covalent/#/) [!\[Repo Star\](https://img.shields.io/github/stars/Teradata/covalent.svg?label=\&style =social)](https://github.com/Teradata/covalent) - 基於 Angular Material 構建的 Teradata UI 平台
* [元素](https://element-angular.faas.ele.me/) [!\[Repo Star\](https://img.shields.io/github/stars/ElemeFE/element-angular.svg?label =\&style=social)](https://github.com/ElemeFE/element-angular) - 最初為 VueJs 構建，Library 提供了豐富的可定制組件選擇以及完整的樣式指南
* [Fuel UI](http://fuelinteractive.github.io/fuel-ui/#/) [!\[Repo Star\](https://img.shields.io/github/stars/FuelInteractive/fuel-ui. svg?label=\&style=social)](https://github.com/FuelInteractive/fuel-ui) - Fuel-UI 是用於 Bootstrap 4 的原生 Angular 2 組件、指令和管道的集合。
* [星雲](https://akveo.github.io/nebular/) [![Repo Star](https://img.shields.io/github/stars/akveo/nebular.svg?label=\&style=social)](https://github.com/akveo/nebular) - 帶有組件、身份驗證和安全性的 UI 工具包，適用於您的下一個 Angular7 應用程序
* [NGX Bootstrap](https://valor-software.com/ngx-bootstrap/#/) [!\[Repo Star\](https://img.shields.io/github/stars/valor-software/ngx- bootstrap.svg?label=\&style=social)](https://github.com/valor-software/ngx-bootstrap) - 帶有 Angular 的 Bootstrap 3/Bootstrap 4 組件，適用於移動設備和桌面設備。
* [NGX ScrollTop](https://github.com/bartholomej/ngx-scrolltop) [!\[Repo Star\](https://img.shields.io/github/stars/bartholomej/ngx-scrolltop.svg?label =\&style=social)](https://github.com/bartholomej/ngx-scrolltop) - 輕量級、受 Material Design 啟發的按鈕，用於滾動到頁面頂部。*沒有依賴關係。純角！*
* [NGX UI](https://swimlane.github.io/ngx-ui/) [!\[Repo Star\](https://img.shields.io/github/stars/swimlane/ngx-ui.svg? label=\&style=social)](https://github.com/swimlane/ngx-ui) - Swimlane 的 Angular 組件和样式庫。
* [NG Bootstrap](https://ng-bootstrap.github.io/) [!\[Repo Star\](https://img.shields.io/github/stars/ng-bootstrap/ng-bootstrap.svg? label=\&style=social)](https://github.com/ng-bootstrap/ng-bootstrap) - 替換 [angular-ui](https://github.com/angular-ui/bootstrap) bootstrap 這是沒有維護時間更長，它為 Angular 提供了 Bootstrap 4 組件，沒有第 3 方 JS 依賴項
* [NG Lightning](http://ng-lightning.github.io/ng-lightning/) [!\[Repo Star\](https://img.shields.io/github/stars/ng-lightning/ng- Lightning.svg?label=\&style=social)](https://github.com/ng-lightning/ng-lightning) - 為 Saleforce 閃電設計系統構建的 Angular 組件
* [NG Semantic-UI](https://ng-semantic.herokuapp.com/) [!\[Repo Star\](https://img.shields.io/github/stars/vladotesanovic/ngSemantic.svg?label= \&style=social)](https://github.com/vladotesanovic/ngSemantic) - 基於 Semantic-UI 的 Angular UI 構建塊
* [NG-ZORRO](https://ng.ant.design/?p=/docs/introduce/en) [!\[Repo Star\](https://img.shields.io/github/stars/NG- ZORRO/ng-zorro-antd.svg?label=\&style=social)](https://github.com/NG-ZORRO/ng-zorro-antd) - NG-ZORRO 組件旨在提供基於企業級 UI關於螞蟻設計
* [材料 2](https://material.angular.io/) [![Repo Star](https://img.shields.io/github/stars/angular/material2.svg?label=\&style=social) ](https://github.com/angular/material2)- Angular 的官方組件庫，實現了 Google 的材料設計，使用 Angular 和 TypeScript 構建
* [MDBootstrap](http://mdbootstrap.com/material-design-for-bootstrap/) [!\[Repo Star\](https://img.shields.io/github/stars/mdbootstrap/Angular-Bootstrap-with -Material-Design.svg?label=\&style=social)](https://github.com/mdbootstrap/Angular-Bootstrap-with-Material-Design) - 基於 Bootstrap 4 的 Material Design UI KIT
* [溫泉用戶界面](https://onsen.io/angular2/) [![Repo Star](https://img.shields.io/github/stars/OnsenUI/OnsenUI.svg?label=\&style=social) ](https://github.com/OnsenUI/OnsenUI)- 100多個組件是基於原始Onsen UI框架專門為Material和Flat設計製作的
* [PatternFly NG](https://www.patternfly.org) [![Repo Star](https://img.shields.io/github/stars/patternfly/patternfly-ng.svg?label=\&style=social)](https://github.com/patternfly/patternfly-ng) - [PatternFly 項目](https://github.com/patternfly/patternfly-design-kit) 的一組 Angular 6+ 組件。它還支持 Angular 4 和 5。
* [Prime NG](https://www.primefaces.org/primeng/#/) [!\[Repo Star\](https://img.shields.io/github/stars/primefaces/primeng.svg?label= \&style=social)](https://github.com/primefaces/primeng) - 這個項目提供了超過 60 個具有多個主題的 UI 組件的豐富而獨特的選擇
* [Primer組件](https://primer.style/components) [![Repo Star](https://img.shields.io/github/stars/primer/components.svg?label=\&style=social) ](https://github.com/primer/components)- [Primer 設計系統](https://primer.style/) 的 React 組件
* [語義 UI Angular](https://github.com/Semantic-Org/Semantic-UI-Angular) [!\[Repo Star\](https://img.shields.io/github/stars/Semantic-Org/ Semantic-UI-Angular.svg?label=\&style=social)](https://github.com/Semantic-Org/Semantic-UI-Angular) - Semantic UI Angular 是 Semantic UI 的官方 Angular 集成。它由Netflix、亞馬遜和其他主要組織。
* `[付費]`[Essential JS 2 for Angular by Syncfusion](https://www.syncfusion.com/angular-ui-components) - 超過 60 個用於 Angular 的高性能、輕量級、模塊化和響應式 UI 組件。
* [NG Particles](https://github.com/matteobruni/tsparticles) - Angular 組件，可輕鬆將完全可定制的粒子動畫添加到網站和 Web 應用程序

### 特殊用例庫

* [NG2 圖表](https://valor-software.com/ng2-charts) [!\[Repo Star\](https://img.shields.io/github/stars/valor-software/ng2-charts.svg ?label=\&style=social)](https://github.com/valor-software/ng2-charts) - 6 種不同類型圖表的 Angular 指令，其屬性基於 chart.js。
* [NG2 Dragula](https://valor-software.com/ng2-dragula/) [!\[Repo Star\](https://img.shields.io/github/stars/valor-software/ng2-dragula. svg?label=\&style=social)](https://github.com/valor-software/ng2-dragula) - Dragula 的官方 Angular 包裝器，用於拖放

### 相關社區列表

* [Awesome Angular](https://github.com/gdi2290/awesome-angular) - 很棒的 Angular 資源的精選列表
* [Awesome Angular Components](https://github.com/brillout/awesome-angular-components) - Angular 2+ 組件和庫目錄

***

## EmberJS

* [Ember Bootstrap](https://www.ember-bootstrap.com/) [!\[Repo Star\](https://img.shields.io/github/stars/kaliber5/ember-bootstrap.svg?label= \&style=social)](https://github.com/kaliber5/ember-bootstrap/) - 使用 Bootstrap 作為原生 Ember 組件的 Ember-cli 插件
* [Ember 組件](http://indexiatech.github.io/ember-components) [!\[Repo Star\](https://img.shields.io/github/stars/indexiatech/ember-components.svg?label =\&style=social)](https://github.com/indexiatech/ember-components) - 該項目旨在成為\[Bootstrap for Ember]\(<https://github.com/ember-addons/bootstrap-> for-ember) 項目，因為此套件中的所有組件都未綁定到任何特定的 CSS 框架。
* [Ember 材料設計](http://mike1234.com/ember-material-design) [!\[Repo Star\](https://img.shields.io/github/stars/mike1o1/ember-material-design. svg?label=\&style=social)](https://github.com/mike1o1/ember-material-design) - 在 EmberJS 中實現 Material Design
* [Ember Material Lite](http://mike.works/ember-material-lite) [!\[Repo Star\](https://img.shields.io/github/stars/mike-north/ember-material- lite.svg?label=\&style=social)](https://github.com/mike-north/ember-material-lite) - 用於 Ember.js 應用程序的 Material Design Lite
* [Ember UIkit](https://github.com/adfinis-sygroup/ember-uikit) [![Repo Star](https://img.shields.io/github/stars/adfinis-sygroup/ember-uikit) .svg?label=\&style=social)](https://github.com/adfinis-sygroup/ember-uikit) - 這個插件是 CSS 庫 UIkit 的包裝器，它公開了某些組件，為用戶提供了一種簡單的使用方式ember 應用程序中的 UIkit。
* [語義 UI Ember](https://semantic-org.github.io/Semantic-UI-Ember/) [!\[Repo Star\](https://img.shields.io/github/stars/Semantic-Org /Semantic-UI-Ember.svg?label=\&style=social)](https://github.com/Semantic-Org/Semantic-UI-Ember) - Semantic UI Ember 是 Semantic UI 的官方 EmberJS 集成。它被使用由 Netflix、亞馬遜和其他主要組織提供。
* [SL Ember 組件](http://softlayer.github.io/sl-ember-components/) [!\[Repo Star\](https://img.shields.io/github/stars/softlayer/sl-ember -components.svg?label=\&style=social)](https://github.com/softlayer/sl-ember-components) - 一個提供各種 UI 組件的 Ember CLI 插件。
* [UI-bootstrap](https://github.com/lifegadget/ui-bootstrap) [!\[Repo Star\](https://img.shields.io/github/stars/lifegadget/ui-bootstrap.svg? label=\&style=social)](https://github.com/lifegadget/ui-bootstrap) - 一個 Ember 風格的 Bootstrap 4.x 生態系統

### 特殊用例庫

* [AnyChart-Ember](https://www.anychart.com/) [!\[Repo Star\](https://img.shields.io/github/stars/AnyChart/AnyChart-Ember.svg?label=\&style =social)](https://github.com/AnyChart/AnyChart-Ember) - Ember CLI 的 AnyChart 組件提供了一種將 AnyChart JavaScript 圖表與 Ember 框架一起使用的簡單方法

### 相關社區列表

* [Awesome Ember](https://github.com/nmec/awesome-ember) - 很棒的 Ember.js 東西的精選列表。

***

\##秘銀

* [構造 UI](https://vrimar.github.io/construct-ui/) [!\[Repo Star\](https://img.shields.io/github/stars/vrimar/construct-ui.svg? label=\&style=social)](https://github.com/vrimar/construct-ui) - mithriljs 的 UI 工具包，其中包含許多受藍圖啟發的常見組件
* [聚乙烯](https://arthurclemens.github.io/polythene-demos/mithril/#/) [!\[回購之星\](https://img.shields.io/github/stars/ArthurClemens/Polythene.svg ?label=\&style=social)](https://github.com/ArthurClemens/Polythene) - Mithril 的 Material Design 組件庫
* [Mithril-Materialized](https://erikvullings.github.io/mithril-materialized/index.html) [!\[Repo Star\](https://img.shields.io/github/stars/erikvullings/mithril- materialized.svg?label=\&style=social)](https://github.com/erikvullings/mithril-materialized) - 一個物化的 CSS 秘銀組件庫
* [mithril-ui](https://github.com/khalti/mithril-ui) [!\[Repo Star\](https://img.shields.io/github/stars/khalti/mithril-ui.svg? label=\&style=social)](https://github.com/khalti/mithril-ui) - Mithril.js 的 UI 組件

### 相關社區列表

* [Awesome Mithril](https://github.com/orbitbot/awesome-mithril) - Mithril 精選列表

***

## Web 組件

* [Aybolit](https://web-padawan.github.io/aybolit) [!\[Repo Star\](https://img.shields.io/github/stars/web-padawan/aybolit.svg?label= \&style=social)](https://github.com/web-padawan/aybolit) - 使用 LitElement 構建的輕量級、基於標準、與框架無關的 Web 組件庫
* [Elix](https://github.com/elix/elix) [![Repo Star](https://img.shields.io/github/stars/elix/elix.svg?label=\&style=social) ](https://github.com/elix/elix)- 用於常見用戶界面模式的高質量、可定制的 Web 組件
* [Material Web Components](https://github.com/material-components/material-components-web-components) [!\[Repo Star\](https://img.shields.io/github/stars/material- components/material-components-web-components.svg?label=\&style=social)](https://github.com/material-components/material-components-web-components) - 作為 Web 組件實現的 Material Design
* [Material Web Components (Custom Elements)](https://dannymoerkerke.github.io/material-webcomponents) by DannyMoerkerke [!\[Repo Star\](https://img.shields.io/github/stars/DannyMoerkerke/ material-webcomponents.svg?label=\&style=social)](https://github.com/DannyMoerkerke/material-webcomponents) - 材料設計的自定義元素
* [Vaadin 組件](https://github.com/vaadin/vaadin) [![Repo Star](https://img.shields.io/github/stars/vaadin/vaadin.svg?label=\&style=social)](https://github.com/vaadin/vaadin) - 用於構建業務 Web 應用程序的不斷發展的高質量 Web 組件集
* [有線元素](https://github.com/wiredjs/wired-elements) [!\[Repo Star\](https://img.shields.io/github/stars/wiredjs/wired-elements.svg?label =\&style=social)](https://github.com/wiredjs/wired-elements) - 一組具有手繪粗略外觀的常見 UI 元素。

### 相關社區列表

* [正確的 Web 組件方式](https://github.com/mateusortiz/webcomponents-the-right-way) - 很棒的 Web 組件資源的精選列表。

***

## A11y 組件

* [a11y-contrast](https://github.com/darekkay/a11y-contrast) — 一個 CLI 實用程序，用於計算/驗證調色板的可訪問幻數。
* [a11y-dialog](https://github.com/KittyGiraudel/a11y-dialog) - 一個非常輕量且靈活的可訪問模態對話框腳本。
* [react-a11y-dialog](https://github.com/KittyGiraudel/react-a11y-dialog) - a11y-dialog 到 React 的端口。
* [vue-a11y-dialog](https://github.com/morkro/vue-a11y-dialog) - a11y-dialog 到 Vue 的端口。
* [svelte-a11y-dialog](https://github.com/AgnosticUI/svelte-a11y-dialog) - a11y-dialog 到 Svelte 的端口。
* [a11y-tabs](https://github.com/agnosticui/a11y-tabs) - 一個輕量級 (<1Kb) JavaScript 包，用於促進兼容 a11y 的選項卡式界面。
* [a11y-menu](https://aberkow.github.io/a11y-menu/) - 該項目旨在創建一個可重用且可訪問的主導航模塊。
* [Scott Ohara 的 a11y 組件](https://github.com/scottaohara/accessible_components) — 可訪問組件和模式的列表。
* [Deque Cauldron](https://pattern-library.dequelabs.com/) — 一個完全可訪問的 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 套件，我完成了！](https://www.reddit.com/r/reactjs/comments/a6qhbr/checked_21_react_ui_kits_briefly_im_done/) 3.【多少個ui庫就夠了？】(<https://dev.to/rhymes/how-many-ui-libraries-is-enough-17om>)

***

## 風格指南

* [很棒的用戶體驗設計](https://github.com/anubhavsrivastava/awesome-ux-design-styles)
* [styleguides.io](http://styleguides.io/) - 網站風格指南資源
* [設計系統圖庫](https://designsystemsrepo.com/design-systems/) - 一個全面的設計系統、樣式指南和模式庫列表，您可以從中獲取靈感。

***

＃＃ 貢獻

歡迎提出建議和 PR！

請閱讀 [貢獻指南](https://github.com/tentenco/awesome/blob/main/devops/awesome-ui-component-library/CONTRIBUTING.md) 以開始使用。

＃＃ 執照

知識共享零 v1.0 通用 [![CC0](http://mirrors.creativecommons.org/presskit/buttons/88x31/svg/cc-zero.svg)](https://creativecommons.org/publicdomain/zero/1.0/)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.tenten.co/awesome/devops/awesome-ui-component-library.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.