1600 lines
90 KiB
HTML
1600 lines
90 KiB
HTML
<h1 id="awesome-ui-component-library">Awesome UI component library</h1>
|
||
<p><a
|
||
href="http://hits.dwyl.io/anubhavsrivastava/awesome-ui-component-library"><img
|
||
src="http://hits.dwyl.io/anubhavsrivastava/awesome-ui-component-library.svg"
|
||
alt="HitCount" /></a> <a href="http://makeapullrequest.com"><img
|
||
src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square"
|
||
alt="PRs Welcome" /></a> <a
|
||
href="https://github.com/anubhavsrivastava/awesome-ui-component-library/graphs/contributors"><img
|
||
src="https://badgen.net/github/contributors/anubhavsrivastava/awesome-ui-component-library"
|
||
alt="Contributors" /></a></p>
|
||
<p><a href="https://awesome.re"><img src="https://awesome.re/badge.svg"
|
||
alt="Awesome" /></a></p>
|
||
<blockquote>
|
||
<p>Curated list of framework component libraries for UI
|
||
styles/toolkit/design systems</p>
|
||
</blockquote>
|
||
<p>Design System - <a
|
||
href="https://www.invisionapp.com/inside-design/guide-to-design-systems/">A
|
||
comprehensive guide to design systems</a></p>
|
||
<p><code>This list doesn't include individual component libraries like button, select, forms, etc</code></p>
|
||
<h3 id="related-list---awesome-ux-design-styleguides">Related List - <a
|
||
href="https://github.com/anubhavsrivastava/awesome-ux-design-styles">Awesome
|
||
UX Design Styleguides</a></h3>
|
||
<h2 id="contents">Contents</h2>
|
||
<!-- toc -->
|
||
<ul>
|
||
<li><a href="#react">React</a>
|
||
<ul>
|
||
<li><a href="#special-use-case-libraries">Special use case
|
||
libraries</a></li>
|
||
<li><a href="#tools">Tools</a></li>
|
||
<li><a href="#related-community-list">Related community list</a></li>
|
||
</ul></li>
|
||
<li><a href="#vuejs">VueJS</a>
|
||
<ul>
|
||
<li><a href="#special-use-case-libraries-1">Special use case
|
||
libraries</a></li>
|
||
<li><a href="#related-community-list-1">Related community list</a></li>
|
||
</ul></li>
|
||
<li><a href="#react-native">React Native</a>
|
||
<ul>
|
||
<li><a href="#special-use-case-libraries-2">Special use case
|
||
libraries</a></li>
|
||
<li><a href="#related-community-list-2">Related community list</a></li>
|
||
</ul></li>
|
||
<li><a href="#angular">Angular</a>
|
||
<ul>
|
||
<li><a href="#special-use-case-libraries-3">Special use case
|
||
libraries</a></li>
|
||
<li><a href="#related-community-list-3">Related community list</a></li>
|
||
</ul></li>
|
||
<li><a href="#emberjs">EmberJS</a>
|
||
<ul>
|
||
<li><a href="#special-use-case-libraries-4">Special use case
|
||
libraries</a></li>
|
||
<li><a href="#related-community-list-4">Related community list</a></li>
|
||
</ul></li>
|
||
<li><a href="#mithril">Mithril</a>
|
||
<ul>
|
||
<li><a href="#related-community-list-5">Related community list</a></li>
|
||
</ul></li>
|
||
<li><a href="#web-components">Web Components</a>
|
||
<ul>
|
||
<li><a href="#related-community-list-6">Related community list</a></li>
|
||
</ul></li>
|
||
<li><a href="#some-community-conversations">Some Community
|
||
conversations</a></li>
|
||
<li><a href="#styleguides">Styleguides</a></li>
|
||
<li><a href="#contribution">Contribution</a></li>
|
||
<li><a href="#license">License</a></li>
|
||
</ul>
|
||
<!-- tocstop -->
|
||
<hr />
|
||
<h2 id="react">React</h2>
|
||
<ul>
|
||
<li><a href="https://www.agnosticui.com/">AgnosticUI</a> - Accessible
|
||
React Component Primitives (that also work with Svelte, Vue 3, and
|
||
Angular).</li>
|
||
<li><a href="http://amazeui.org/react/">Amaze UI</a> <a
|
||
href="https://github.com/amazeui/amazeui-react"><img
|
||
src="https://img.shields.io/github/stars/amazeui/amazeui-react.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - React components based on <a
|
||
href="http://amazeui.org/">AmazeUI</a></li>
|
||
<li><a href="http://t.amazeui.org">Amaze UI Touch</a> <a
|
||
href="https://github.com/amazeui/amazeui-touch/"><img
|
||
src="https://img.shields.io/github/stars/amazeui/amazeui-touch.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - React.js-based mobile web component
|
||
library</li>
|
||
<li><a href="https://arwes.dev/">ARWES</a> <a
|
||
href="https://github.com/arwesjs/arwes"><img
|
||
src="https://img.shields.io/github/stars/arwesjs/arwes.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Futuristic Sci-Fi and Cyberpunk Graphical User
|
||
Interface Framework for Web Apps</li>
|
||
<li><a href="https://ant.design/">Ant Design React</a> <a
|
||
href="https://github.com/ant-design/ant-design"><img
|
||
src="https://img.shields.io/github/stars/ant-design/ant-design.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - An enterprise-class UI design language and
|
||
React-based implementation. Ant-design Pro is available <a
|
||
href="https://github.com/ant-design/ant-design-pro">here</a></li>
|
||
<li><a href="https://atlaskit.atlassian.com/">Atlaskit</a> -
|
||
Atlasssian’s official React UI kit is the technical implementation of
|
||
the Atlassian Design Guidelines (ADG)</li>
|
||
<li><a href="https://backpack.github.io/components">Backpack</a> <a
|
||
href="https://github.com/Skyscanner/backpack"><img
|
||
src="https://img.shields.io/github/stars/Skyscanner/backpack.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Backpack Design System used to build skyscanner
|
||
products</li>
|
||
<li><a href="https://lonelyplanet.github.io/backpack-ui">Backpack UI</a>
|
||
<a href="https://github.com/lonelyplanet/backpack-ui"><img
|
||
src="https://img.shields.io/github/stars/lonelyplanet/backpack-ui.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Component library to build the Lonely Planet UI
|
||
experience.</li>
|
||
<li><a href="https://baseui.netlify.com">Base UI</a> <a
|
||
href="https://github.com/uber-web/baseui"><img
|
||
src="https://img.shields.io/github/stars/uber-web/baseui.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - A React Component library implementing the Base
|
||
UI design</li>
|
||
<li><a href="http://nikgraf.github.io/">Belle</a> <a
|
||
href="https://github.com/nikgraf/belle/"><img
|
||
src="https://img.shields.io/github/stars/nikgraf/belle.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - A set of React components optimized for mobile
|
||
& desktop with highly customizable styles which can be configured on
|
||
the base level as well individually for each one of them.</li>
|
||
<li><a href="https://bloom.appearhere.co.uk">Bloom</a> <a
|
||
href="https://github.com/appearhere/bloom"><img
|
||
src="https://img.shields.io/github/stars/appearhere/bloom.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Bloom acts as a central repository for
|
||
reuseable React components and common styles for AppearHere. It is
|
||
bootstrapped with create-react-app.</li>
|
||
<li><a href="https://helpscout.gitbook.io/hsds-react/">Blue</a> <a
|
||
href="https://github.com/helpscout/hsds-react"><img
|
||
src="https://img.shields.io/github/stars/helpscout/hsds-react.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - React components for Help Scout’s Design
|
||
System</li>
|
||
<li><a href="https://blueprintjs.com/">Blueprint</a> <a
|
||
href="https://github.com/palantir/blueprint"><img
|
||
src="https://img.shields.io/github/stars/palantir/blueprint.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - A React-based UI toolkit for building complex,
|
||
data-dense web interfaces for desktop applications.</li>
|
||
<li><a href="https://bufferapp.github.io/buffer-components">Buffer</a>
|
||
<a href="https://github.com/bufferapp/buffer-components"><img
|
||
src="https://img.shields.io/github/stars/bufferapp/buffer-components.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Buffer’s shared collection of React UI
|
||
components</li>
|
||
<li><a href="https://buttercup.pw/">Buttercup UI</a> <a
|
||
href="https://github.com/buttercup/ui"><img
|
||
src="https://img.shields.io/github/stars/buttercup/ui.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - React UI Components used in Buttercup
|
||
products</li>
|
||
<li><a href="http://react.carbondesignsystem.com">Carbon</a> <a
|
||
href="https://github.com/IBM/carbon-components-react"><img
|
||
src="https://img.shields.io/github/stars/IBM/carbon-components-react.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - React components according to IBM’s <a
|
||
href="http://carbondesignsystem.com/">Carbon design system</a></li>
|
||
<li><a href="https://canvas.hubspot.com/components">Canvas</a> - HubSpot
|
||
Canvas is the design system that HubSpot uses to build products.</li>
|
||
<li><a href="https://cloudflare.github.io/cf-ui">cf-design</a> <a
|
||
href="https://github.com/cloudflare/cf-ui"><img
|
||
src="https://img.shields.io/github/stars/cloudflare/cf-ui.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Cloudflare UI Framework</li>
|
||
<li><a href="https://chakra-ui.com/">chakra-ui</a> <a
|
||
href="https://github.com/chakra-ui/chakra-ui"><img
|
||
src="https://img.shields.io/github/stars/chakra-ui/chakra-ui.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Modular & Accessible UI Components for your
|
||
React Applications</li>
|
||
<li><a href="https://auth0-cosmos.now.sh">Cosmos</a> <a
|
||
href="https://github.com/auth0/cosmos"><img
|
||
src="https://img.shields.io/github/stars/auth0/cosmos.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Component library for Auth0 Design System</li>
|
||
<li><a href="https://www.froala.com/design-blocks">design-blocks</a> <a
|
||
href="https://github.com/froala/react-froala-design-blocks"><img
|
||
src="https://img.shields.io/github/stars/froala/react-froala-design-blocks.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Over 170 responsive design blocks ready to be
|
||
used in your web or mobile apps. All blocks are based on the Bootstrap
|
||
Library</li>
|
||
<li><a href="https://elastic.github.io/eui/">Elastic</a> <a
|
||
href="https://github.com/elastic/eui"><img
|
||
src="https://img.shields.io/github/stars/elastic/eui.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - The Elastic UI Framework is a collection of
|
||
React UI components for quickly building user interfaces at Elastic</li>
|
||
<li><a href="https://elemefe.github.io/element-react">Element</a> <a
|
||
href="https://github.com/ElemeFE/element-react"><img
|
||
src="https://img.shields.io/github/stars/ElemeFE/element-react.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Initially build for VueJs, Library provides a
|
||
rich selection of customizable components along with a full
|
||
style-guide</li>
|
||
<li><a href="http://elemental-ui.com/">Elemental UI</a> <a
|
||
href="https://github.com/elementalui/elemental"><img
|
||
src="https://img.shields.io/github/stars/elementalui/elemental.svg?label=&style=social"
|
||
alt="Repo Star" /></a>- A UI Toolkit for React.js Websites and Apps</li>
|
||
<li><a href="https://evergreen.segment.com/">Evergreen</a> <a
|
||
href="https://github.com/segmentio/evergreen"><img
|
||
src="https://img.shields.io/github/stars/segmentio/evergreen.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Evergreen is a React UI Framework from Segment
|
||
for products on the web.</li>
|
||
<li><a href="https://developer.microsoft.com/en-us/fabric">Fabric</a> <a
|
||
href="https://github.com/OfficeDev/office-ui-fabric-react"><img
|
||
src="https://img.shields.io/github/stars/OfficeDev/office-ui-fabric-react.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - A set of React components for building
|
||
experiences for Office and Office 365 by Microsoft, written in
|
||
Typescript.</li>
|
||
<li><a href="https://falcon-ui.docs.deity.io/">Falcon UI</a> <a
|
||
href="https://github.com/deity-io/falcon/tree/master/packages/falcon-ui"><img
|
||
src="https://img.shields.io/github/stars/deity-io/falcon.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - falcon-ui is a library of composable, themable,
|
||
design-system-driven UI components for React.</li>
|
||
<li><a href="https://design.alfabank.ru/">Feather</a> <a
|
||
href="https://github.com/alfa-laboratory/arui-feather"><img
|
||
src="https://img.shields.io/github/stars/alfa-laboratory/arui-feather.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - is a library of React components for creating
|
||
web interfaces at Alfa-Bank</li>
|
||
<li><a href="https://feelix.myob.com/">Feelix</a> - collection of
|
||
front-end interface elements that can be reused across the MYOB
|
||
browser-based products.</li>
|
||
<li><a href="http://developers.fyndiq.com/fyndiq-ui">FYNDIQ-UI</a> <a
|
||
href="https://github.com/fyndiq/fyndiq-ui"><img
|
||
src="https://img.shields.io/github/stars/fyndiq/fyndiq-ui.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Library of reusable web frontend components for
|
||
Fyndiq</li>
|
||
<li><a href="https://garden.zendesk.com/react-components/">Garden</a> <a
|
||
href="https://github.com/zendeskgarden/react-components"><img
|
||
src="https://img.shields.io/github/stars/zendeskgarden/react-components.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Garden React components based on garden
|
||
css</li>
|
||
<li><a href="https://pinterest.github.io/gestalt/">Gestalt</a> <a
|
||
href="https://github.com/pinterest/gestalt"><img
|
||
src="https://img.shields.io/github/stars/pinterest/gestalt.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - A set of React UI components that supports
|
||
Pinterest’s design language.</li>
|
||
<li><a href="https://govuk-react.github.io/govuk-react/">GovUK React</a>
|
||
<a href="https://github.com/govuk-react/govuk-react/"><img
|
||
src="https://img.shields.io/github/stars/govuk-react/govuk-react.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - An implementation of the GOV.UK Design System
|
||
in React using CSSinJS using Object notation (with
|
||
styled-components).</li>
|
||
<li><a href="https://v2.grommet.io/">Grommet</a> <a
|
||
href="https://github.com/grommet/grommet"><img
|
||
src="https://img.shields.io/github/stars/grommet/grommet.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - React-based framework that provides
|
||
accessibility, modularity, responsiveness, and theming.</li>
|
||
<li><a href="https://gumdrops.gumgum.com/">Gumdrops</a> <a
|
||
href="https://github.com/gumgum/gumdrops"><img
|
||
src="https://img.shields.io/github/stars/gumgum/gumdrops.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - GumGum’s React Reusable Component Library</li>
|
||
<li><a href="https://design.hackclub.com">Hack Club’s design system</a>
|
||
<a href="https://github.com/hackclub/design-system"><img
|
||
src="https://img.shields.io/github/stars/hackclub/design-system.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Component inspired by Priceline’s design
|
||
system</li>
|
||
<li><a href="https://hana-ui.moe/en/overview">Hana UI</a> <a
|
||
href="https://github.com/hana-group/hana-ui"><img
|
||
src="https://img.shields.io/github/stars/hana-group/hana-ui.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - A react UIKit with nijigen style.</li>
|
||
<li><a href="https://alibaba.github.io/ice/">Ice</a> <a
|
||
href="https://github.com/alibaba/ice/"><img
|
||
src="https://img.shields.io/github/stars/alibaba/ice.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Design kit by Alibaba</li>
|
||
<li><a href="https://instructure.design/">Instructure UI</a> <a
|
||
href="https://github.com/instructure/instructure-ui"><img
|
||
src="https://img.shields.io/github/stars/instructure/instructure-ui.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - A UI Component Library made by Instructure,
|
||
Inc</li>
|
||
<li><a href="http://khan.github.io/react-components/">KhanAcademy
|
||
React</a> <a href="https://github.com/Khan/react-components"><img
|
||
src="https://img.shields.io/github/stars/Khan/react-components.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Khan’s academy’s React UI components released
|
||
to the community</li>
|
||
<li><a href="https://klarna.github.io/ui/">Klarna UI</a> <a
|
||
href="https://github.com/klarna/ui"><img
|
||
src="https://img.shields.io/github/stars/klarna/ui.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Klarna’s UI components library for React</li>
|
||
<li><a href="https://github.com/kokonut-labs/kokonutui">Kokonut UI</a>
|
||
<a href="https://github.com/kokonut-labs/kokonutui"><img
|
||
src="https://img.shields.io/github/stars/kokonut-labs/kokonutui.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Free Modern and Customizable UI
|
||
components.</li>
|
||
<li><a href="https://www.launchuicomponents.com/">Launch UI</a> <a
|
||
href="https://github.com/launch-ui/launch-ui"><img
|
||
src="https://img.shields.io/github/stars/launch-ui/launch-ui.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Landing page components built with React,
|
||
Shadcn/ui and Tailwind that will make your website feel premium.</li>
|
||
<li><a href="https://react.lightningdesignsystem.com/">Lightning Design
|
||
System</a> <a
|
||
href="https://github.com/salesforce/design-system-react"><img
|
||
src="https://img.shields.io/github/stars/salesforce/design-system-react.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - This library is the React implementation of the
|
||
Salesforce <a href="https://www.lightningdesignsystem.com/">Lightning
|
||
Design System</a></li>
|
||
<li><a href="https://magicui.design/">Magic UI</a> <a
|
||
href="https://github.com/magicuidesign/magicui"><img
|
||
src="https://img.shields.io/github/stars/magicuidesign/magicui.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Create stunning and engaging landing pages with
|
||
free, open-source animated components that are easy to customize.</li>
|
||
<li><a href="https://material-ui.com/">Material UI</a> <a
|
||
href="https://github.com/mui-org/material-ui"><img
|
||
src="https://img.shields.io/github/stars/mui-org/material-ui.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Components that implement Google’s Material
|
||
Design. Example usage can be seen <a
|
||
href="https://material-ui.com/getting-started/example-projects/">here</a>.</li>
|
||
<li><a
|
||
href="http://mdbootstrap.com/material-design-for-bootstrap/">MDBootstrap</a>
|
||
<a
|
||
href="https://github.com/mdbootstrap/React-Bootstrap-with-Material-Design"><img
|
||
src="https://img.shields.io/github/stars/mdbootstrap/React-Bootstrap-with-Material-Design.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Material Design UI KIT based on Bootstrap
|
||
4</li>
|
||
<li><a href="http://mongodb.design">MongoDB UI Design</a> <a
|
||
href="https://github.com/mongodb/design"><img
|
||
src="https://img.shields.io/github/stars/mongodb/design.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - The MongoDB Design System contains the UI
|
||
building blocks that make up the user experience across all MongoDB
|
||
products.</li>
|
||
<li><a href="https://mineral-ui.com/">Mineral UI</a> <a
|
||
href="https://github.com/mineral-ui/mineral-ui"><img
|
||
src="https://img.shields.io/github/stars/mineral-ui/mineral-ui.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - A design system and React component library for
|
||
the web that lets you quickly build high-quality, accessible apps.
|
||
Created by <a href="https://www.ca.com">CA Technologies</a></li>
|
||
<li><a href="https://github.com/textkernel/nice-react">Nice! React</a>
|
||
<a href="https://github.com/textkernel/nice-react"><img
|
||
src="https://img.shields.io/github/stars/textkernel/nice-react.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Nice! React provides UI elements from the Nice!
|
||
UI library in the form of React components</li>
|
||
<li><a href="https://textkernel.github.io/oneui">OneUI</a> <a
|
||
href="https://github.com/textkernel/oneui"><img
|
||
src="https://img.shields.io/github/stars/textkernel/oneui.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Textkernel OneUI library of reusable UI
|
||
components</li>
|
||
<li><a href="https://onsen.io/react/">Onsen UI React</a> <a
|
||
href="https://github.com/OnsenUI/OnsenUI"><img
|
||
src="https://img.shields.io/github/stars/OnsenUI/OnsenUI.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - More than 100 components are specially made for
|
||
Material and Flat design based on original the Onsen UI framework</li>
|
||
<li><a href="https://orbit.kiwi/">Orbit Components</a> <a
|
||
href="https://github.com/kiwicom/orbit-components/"><img
|
||
src="https://img.shields.io/github/stars/kiwicom/orbit-components.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Orbit-components is a React component library.
|
||
Based on Kiwi’s design which governs their product style.</li>
|
||
<li><a href="https://inloco.github.io/orion/">Orion</a> <a
|
||
href="https://github.com/inloco/orion"><img
|
||
src="https://img.shields.io/github/stars/inloco/orion.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - In Loco’s component library, based on React
|
||
Semantic UI.</li>
|
||
<li><a href="https://www.patternfly.org">PatternFly React</a> <a
|
||
href="https://github.com/patternfly/patternfly-react"><img
|
||
src="https://img.shields.io/github/stars/patternfly/patternfly-react.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - A set of React components for the <a
|
||
href="https://github.com/patternfly/patternfly-design-kit">PatternFly
|
||
project</a> which is built on top of Bootstrap 3.</li>
|
||
<li><a href="https://styleguide.pivotal.io">Pivotal UI</a> <a
|
||
href="https://github.com/pivotal-cf/pivotal-ui"><img
|
||
src="https://img.shields.io/github/stars/pivotal-cf/pivotal-ui.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Pivotal UI is a collection of React components
|
||
that are styled for the Pivotal brand</li>
|
||
<li><a href="https://design-system.pluralsight.com">Pluralsight Design
|
||
System</a> <a href="https://github.com/pluralsight/design-system"><img
|
||
src="https://img.shields.io/github/stars/pluralsight/design-system.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - The UI building blocks for creating a cohesive
|
||
design across Pluralsight products</li>
|
||
<li><a href="https://polaris.shopify.com/">Polaris React</a> <a
|
||
href="https://github.com/Shopify/polaris-react"><img
|
||
src="https://img.shields.io/github/stars/Shopify/polaris-react.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Polaris React is a component library based on
|
||
<a href="https://polaris.shopify.com/resources/polaris-ui-kit">Shopify’s
|
||
Polaris style</a></li>
|
||
<li><a href="https://pricelinelabs.github.io/design-system/">Priceline
|
||
One</a> <a href="https://github.com/pluralsight/design-system"><img
|
||
src="https://img.shields.io/github/stars/pluralsight/design-system.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - The UI building blocks for creating a cohesive
|
||
design across Pluralsight products.</li>
|
||
<li><a href="https://www.primefaces.org/primereact">Prime React</a> <a
|
||
href="https://github.com/primefaces/primereact"><img
|
||
src="https://img.shields.io/github/stars/primefaces/primereact.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - This project which provides a rich and unique
|
||
selection of over 60 UI components with multiple themes</li>
|
||
<li><a href="https://quran.github.io/common-components/">Quran</a> <a
|
||
href="https://github.com/quran/common-components"><img
|
||
src="https://img.shields.io/github/stars/quran/common-components.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Common components used across Quran.com,
|
||
Quranicaudio.com and Salah.com</li>
|
||
<li><a href="https://dfee.github.io/rbx/">RBX</a> <a
|
||
href="https://github.com/dfee/rbx"><img
|
||
src="https://img.shields.io/github/stars/dfee/rbx.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - The Comprehensive Bulma UI Framework for
|
||
React</li>
|
||
<li><a href="https://reakit.io/">Reakit</a> <a
|
||
href="https://github.com/reakit/reakit"><img
|
||
src="https://img.shields.io/github/stars/reakit/reakit.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Toolkit for building really interactive UIs and
|
||
components are WAI-ARIA compliant and all components are in accordance
|
||
with the Single Element Pattern</li>
|
||
<li><a href="https://ui.reach.tech/">Reach UI</a> <a
|
||
href="https://github.com/reach/reach-ui"><img
|
||
src="https://img.shields.io/github/stars/reach/reach-ui.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - The Accessible Foundation for React Apps and
|
||
Design Systems</li>
|
||
<li><a href="https://reactackle.braincrumbs.io/">Reactackle</a> <a
|
||
href="https://github.com/bcrumbs/reactackle"><img
|
||
src="https://img.shields.io/github/stars/bcrumbs/reactackle.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - React UI library build with styled-components
|
||
which provides cross-browser support</li>
|
||
<li><a href="https://reactstrap.github.io/">reactstrap</a> <a
|
||
href="https://github.com/reactstrap/reactstrap"><img
|
||
src="https://img.shields.io/github/stars/reactstrap/reactstrap.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Stateless React Bootstrap 4 components that
|
||
favor composition and control. The library does not depend on jQuery or
|
||
Bootstrap javascript</li>
|
||
<li><a href="https://react95.github.io/React95">React95</a> <a
|
||
href="https://github.com/React95/React95"><img
|
||
src="https://img.shields.io/github/stars/React95/React95.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - A React components library with Win95 UI</li>
|
||
<li><a href="https://react-bootstrap.github.io/">React Bootstrap</a><a
|
||
href="https://github.com/react-bootstrap/react-bootstrap"><img
|
||
src="https://img.shields.io/github/stars/react-bootstrap/react-bootstrap.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - React-Bootstrap is a complete re-implementation
|
||
of the Bootstrap 3 components using React.</li>
|
||
<li><a href="http://reactdesktop.js.org/">React Desktop</a> <a
|
||
href="https://github.com/gabrielbull/react-desktop"><img
|
||
src="https://img.shields.io/github/stars/gabrielbull/react-desktop.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - UI component library which aims to bring a
|
||
native desktop experience to the web, featuring many macOS Sierra and
|
||
Windows 10 components.</li>
|
||
<li><a href="https://react.foundation/">React Foundation</a> - <a
|
||
href="https://github.com/nordsoftware/react-foundation"><img
|
||
src="https://img.shields.io/github/stars/nordsoftware/react-foundation.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - React components for <a
|
||
href="https://foundation.zurb.com/">Foundation</a> UI Design.</li>
|
||
<li><a href="http://reactionic.github.io/">React Ionic</a> <a
|
||
href="https://github.com/pors/reactionic"><img
|
||
src="https://img.shields.io/github/stars/pors/reactionic.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - React components for Ionic which allows us to
|
||
build iOS and Android apps that are indistinguishable from native
|
||
apps.</li>
|
||
<li><a href="https://jamesmfriedman.github.io/rmwc/">React Material Web
|
||
Components</a> <a href="https://github.com/jamesmfriedman/rmwc"><img
|
||
src="https://img.shields.io/github/stars/jamesmfriedman/rmwc.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - React Material Web Components, wraps Google’s
|
||
Official Material Design Components. Includes Flow and Typescript types.
|
||
Individually packaged components.</li>
|
||
<li><a href="https://react-materialize.github.io">React Materialize</a>
|
||
<a href="https://github.com/react-materialize/react-materialize"><img
|
||
src="https://img.shields.io/github/stars/react-materialize/react-materialize.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Material design for react, powered by
|
||
materialize.css</li>
|
||
<li><a href="https://react-md.mlaursen.com/">React MD</a> <a
|
||
href="https://github.com/mlaursen/react-md"><img
|
||
src="https://img.shields.io/github/stars/mlaursen/react-md.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - React toolkit for building a web app with
|
||
Google’s Material Design with very highly customizable themes and
|
||
styling (Sass)</li>
|
||
<li><a href="https://flatlogic.com/templates/react-native-starter">React
|
||
Native Starter</a> <a
|
||
href="https://github.com/flatlogic/react-native-starter"><img
|
||
src="https://img.shields.io/github/stars/mlaursen/react-md.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - A powerful react native starter template that
|
||
bootstraps development of your mobile application.</li>
|
||
<li><a
|
||
href="https://catamphetamine.github.io/react-responsive-ui/">React
|
||
Responsive UI</a> <a
|
||
href="https://github.com/catamphetamine/react-responsive-ui"><img
|
||
src="https://img.shields.io/github/stars/catamphetamine/react-responsive-ui.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Responsive React UI components</li>
|
||
<li><a href="http://react-toolbox.io">React Toolbox</a> <a
|
||
href="https://github.com/react-toolbox/react-toolbox/"><img
|
||
src="https://img.shields.io/github/stars/react-toolbox/react-toolbox.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - set of React components that implement Google’s
|
||
Material Design specification. It’s powered by CSS Modules and
|
||
harmoniously integrates with your webpack workflow.</li>
|
||
<li><a href="http://lobos.github.io/react-ui">React UI</a> <a
|
||
href="https://github.com/Lobos/react-ui"><img
|
||
src="https://img.shields.io/github/stars/Lobos/react-ui.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - A collection of components for React, based on
|
||
bootstrap 4.0. This project is no longer maintained.</li>
|
||
<li><a href="http://kbuechl.github.io/react-uikit-components/">React
|
||
UIKit Components</a> <a
|
||
href="https://github.com/kbuechl/react-uikit-components"><img
|
||
src="https://img.shields.io/github/stars/kbuechl/react-uikit-components.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Collection of React components using the UIkit
|
||
CSS framework.</li>
|
||
<li><a href="https://www.react-uwp.com/">React UWP</a> <a
|
||
href="https://github.com/myxvisual/react-uwp"><img
|
||
src="https://img.shields.io/github/stars/myxvisual/react-uwp.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - React Components that Implement Microsoft’s UWP
|
||
Design & Fluent Design</li>
|
||
<li><a href="https://weui.github.io/react-weui/docs">React WeUI</a> <a
|
||
href="https://github.com/weui/react-weui"><img
|
||
src="https://img.shields.io/github/stars/weui/react-weui.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - WeUI Components build with React inspired by
|
||
WeChat</li>
|
||
<li><a href="https://rebassjs.org/">Rebass</a> <a
|
||
href="https://github.com/rebassjs/rebass"><img
|
||
src="https://img.shields.io/github/stars/rebassjs/rebass.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - React UI component library & design system,
|
||
built with styled-components and styled-system. It’s a great choice for
|
||
Styled-components fans.</li>
|
||
<li><a
|
||
href="https://balena-io-modules.github.io/rendition/">Rendition</a> <a
|
||
href="https://github.com/balena-io-modules/rendition"><img
|
||
src="https://img.shields.io/github/stars/balena-io-modules/rendition.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - A library of UI components, built using React,
|
||
recompose, styled-components and styled-system.</li>
|
||
<li><a href="https://jetbrains.github.io/ring-ui/">RingUI</a> <a
|
||
href="https://github.com/JetBrains/ring-ui"><img
|
||
src="https://img.shields.io/github/stars/JetBrains/ring-ui.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - This collection of UI components aims to
|
||
provide all of the necessary building blocks for web-based products
|
||
built inside JetBrains</li>
|
||
<li><a href="https://rsuitejs.com/">RSuite</a> <a
|
||
href="https://github.com/rsuite/rsuite"><img
|
||
src="https://img.shields.io/github/stars/rsuite/rsuite.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - RSUITE (React Suite) is a set of react
|
||
component libraries for enterprise system products.</li>
|
||
<li><a href="https://salt-ui.github.io">Salt UI</a> <a
|
||
href="https://github.com/salt-ui/saltui"><img
|
||
src="https://img.shields.io/github/stars/salt-ui/saltui.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - concise mobile UI component library</li>
|
||
<li><a href="https://seek-oss.github.io/seek-style-guide">Seek Style</a>
|
||
<a href="https://github.com/seek-oss/seek-style-guide"><img
|
||
src="https://img.shields.io/github/stars/seek-oss/seek-style-guide.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Living style guide for SEEK, powered by React,
|
||
webpack, CSS Modules and Less.</li>
|
||
<li><a href="https://react.semantic-ui.com/">Semantic UI React</a> <a
|
||
href="https://github.com/Semantic-Org/Semantic-UI-React"><img
|
||
src="https://img.shields.io/github/stars/Semantic-Org/Semantic-UI-React.svg?label=&style=social"
|
||
alt="Repo Star" /></a>- Semantic UI React is the official React
|
||
integration for Semantic UI. It’s used by Netflix, Amazon and other
|
||
major organizations. Examples can be found <a
|
||
href="https://github.com/Semantic-Org/Semantic-UI-React/tree/master/examples">here</a></li>
|
||
<li><a href="https://shadcnblocks.com">Shadcnblocks</a> <a
|
||
href="https://github.com/shadcnblockscom/shadcn-ui-blocks"><img
|
||
src="https://img.shields.io/github/stars/shadcnblockscom/shadcn-ui-blocks.svg?label=&style=social"
|
||
alt="Repo Star" /></a> A library of hundreds of blocks built with React,
|
||
shadcn/ui and Tailwind.</li>
|
||
<li><a href="https://designrevision.com/docs/shards-react/">Shards</a>
|
||
<a href="https://github.com/designrevision/shards-react"><img
|
||
src="https://img.shields.io/github/stars/designrevision/shards-react.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Shards React is a free, beautiful and modern
|
||
React UI kit based on <a
|
||
href="https://designrevision.com/downloads/shards/">Shards</a></li>
|
||
<li><a href="https://smooth-ui.smooth-code.com/">Smooth UI</a> <a
|
||
href="https://github.com/smooth-code/smooth-ui"><img
|
||
src="https://img.shields.io/github/stars/smooth-code/smooth-ui.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Smooth UI is a style system / UI library for
|
||
React. It works with Styled Components</li>
|
||
<li><a href="https://instacart.github.io/Snacks/">Snacks</a> <a
|
||
href="https://github.com/instacart/Snacks"><img
|
||
src="https://img.shields.io/github/stars/instacart/Snacks.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Snacks is a JavaScript and React based
|
||
component library. It has a default theme matching Instacart’s
|
||
styles.</li>
|
||
<li><a href="https://sparkdesignsystem.com/">Spark</a> <a
|
||
href="https://github.com/sparkdesignsystem/spark-design-system"><img
|
||
src="https://img.shields.io/github/stars/sparkdesignsystem/spark-design-system.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Spark Design System is a system of patterns and
|
||
components used to create the user interface for the Quicken Loans
|
||
family of Fintech products.</li>
|
||
<li><a href="https://stardust-ui.github.io/react/">Stardust UI</a> <a
|
||
href="https://github.com/stardust-ui/react"><img
|
||
src="https://img.shields.io/github/stars/stardust-ui/react.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Stardust is a set of specifications and tools
|
||
for building UI libraries. It is based on a fork of <a
|
||
href="https://github.com/Semantic-Org/Semantic-UI-React">Semantic UI
|
||
React (SUIR)</a>.</li>
|
||
<li><a
|
||
href="https://sheinsight.github.io/shineout/1.1.x/#/">Shineout</a> <a
|
||
href="https://github.com/sheinsight/shineout"><img
|
||
src="https://img.shields.io/github/stars/sheinsight/shineout.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - A theme-able components library for React which
|
||
support i18n.</li>
|
||
<li><a href="https://www.tenon-ui.info/">Tenon-UI</a> <a
|
||
href="https://github.com/tenon-io/tenon-ui"><img
|
||
src="https://img.shields.io/github/stars/tenon-io/tenon-ui.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Go-to library for React developers who want to
|
||
build inclusive and accessible sites. Recommended for accessibility
|
||
(a11y).</li>
|
||
<li><a href="https://uiwjs.github.io">UIW</a> <a
|
||
href="https://github.com/uiwjs/uiw"><img
|
||
src="https://img.shields.io/github/stars/uiwjs/uiw.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - A high quality UI Toolkit, A Component Library
|
||
for React 16+</li>
|
||
<li><a href="http://uxco.re/">UXCore</a> <a
|
||
href="https://github.com/uxcore/uxcore"><img
|
||
src="https://img.shields.io/github/stars/uxcore/uxcore.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - A React UI Component Suites living for
|
||
enterprise application by Alibaba, Inc.</li>
|
||
<li><a href="https://microsoft.github.io/YamUI/">YamUI</a> <a
|
||
href="https://github.com/Microsoft/YamUI"><img
|
||
src="https://img.shields.io/github/stars/Microsoft/YamUI.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Reusable component framework for Yammer.com, it
|
||
is built with React on top of Office UI Fabric components</li>
|
||
<li><a href="http://uniform.hudl.com/">Uniform</a> - Uniform is Hudl’s
|
||
design system. It exists to unify Hudl’s products through design and
|
||
code implementation.</li>
|
||
<li><a href="https://styleguide.vtex.com/">VTEX Styleguide</a> <a
|
||
href="https://github.com/vtex/styleguide"><img
|
||
src="https://img.shields.io/github/stars/vtex/styleguide.svg?label=&style=social"
|
||
alt="Repo Star" /></a>- The VTEX Design System backed by React component
|
||
library</li>
|
||
<li><a href="https://yep-react.jd.com/">Yep-React</a> <a
|
||
href="https://github.com/jdf2e/yep-react"><img
|
||
src="https://img.shields.io/github/stars/jdf2e/yep-react.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - React v16-based front-end UI component library
|
||
for rapid development of mobile pages</li>
|
||
<li><a href="https://youzan.github.io/zent/en/guides/install">Zent</a>
|
||
<a href="https://github.com/youzan/zent"><img
|
||
src="https://img.shields.io/github/stars/youzan/zent.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Zent is a React component library developed and
|
||
used at Youzan with more than 50 components for now.</li>
|
||
<li><a href="https://alphago88.github.io/Zero-UI/">Zero-UI</a> <a
|
||
href="https://github.com/AlphaGo88/Zero-UI"><img
|
||
src="https://img.shields.io/github/stars/AlphaGo88/Zero-UI.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Zero-UI is an easy-to-use web UI component
|
||
framework which includes a set of useful components.</li>
|
||
<li><a href="https://zhui-team.github.io/zhui/">ZHUI</a> <a
|
||
href="https://github.com/zhui-team/zhui"><img
|
||
src="https://img.shields.io/github/stars/zhui-team/zhui.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - A Chinese style component library powered by
|
||
React</li>
|
||
<li><code>[Paid]</code><a
|
||
href="https://www.syncfusion.com/react-ui-components">Essential JS 2 for
|
||
React by Syncfusion</a> - Over 60 high-performance, lightweight,
|
||
modular, and responsive UI components for React.</li>
|
||
<li><code>[Paid]</code><a
|
||
href="https://www.sencha.com/products/extreact/">ExtReact</a> <a
|
||
href="https://github.com/sencha/ext-react"><img
|
||
src="https://img.shields.io/github/stars/sencha/ext-react.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - 115+ pre-built UI components that are fully
|
||
supported and designed to interact and work together, from Sencha
|
||
UI</li>
|
||
<li><code>[Paid]</code><a
|
||
href="https://www.jqwidgets.com/react/">jQWidgets</a> - React components
|
||
based on jqwidgets.</li>
|
||
<li><code>[Paid]</code><a
|
||
href="https://www.telerik.com/kendo-react-ui/">KendoReact</a> - 90+
|
||
professional UI components built from the ground up for React -
|
||
responsive, accessible and feature rich.</li>
|
||
<li><code>[Paid]</code><a
|
||
href="https://mobiscroll.com/react">Mobiscroll</a> - React components
|
||
for Mobile UI Controls.</li>
|
||
<li><code>[Paid]</code><a
|
||
href="https://www.grapecity.com/en/react/">Wijmo React</a> - React
|
||
components for Wizmo Toolkit from grapeCity.</li>
|
||
<li><a href="https://github.com/matteobruni/tsparticles">React
|
||
tsParticles</a> - React component for easily add fully customizable
|
||
particles animations to websites and web applications</li>
|
||
</ul>
|
||
<h3 id="special-use-case-libraries">Special use case libraries</h3>
|
||
<ul>
|
||
<li><a href="https://github.com/yuanyan/halogen">Halogen</a> <a
|
||
href="https://github.com/yuanyan/halogen"><img
|
||
src="https://img.shields.io/github/stars/yuanyan/halogen.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - A collection of loading spinners with
|
||
React.js</li>
|
||
<li><a href="https://nivo.rocks/">Nivo</a> <a
|
||
href="https://github.com/plouc/nivo"><img
|
||
src="https://img.shields.io/github/stars/plouc/nivo.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Nivo provides a rich set of dataviz components,
|
||
built on top of the awesome d3 and Reactjs libraries.</li>
|
||
<li><a href="http://recharts.org">Recharts</a> <a
|
||
href="https://github.com/recharts/recharts"><img
|
||
src="https://img.shields.io/github/stars/recharts/recharts.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Redefined chart library components built with
|
||
D3</li>
|
||
<li><a href="https://lucasbassetti.com.br/react-css-loaders/">React CSS
|
||
Loaders</a> <a
|
||
href="https://github.com/LucasBassetti/react-css-loaders"><img
|
||
src="https://img.shields.io/github/stars/LucasBassetti/react-css-loaders.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - A collection of pure CSS React loading
|
||
components</li>
|
||
<li><a href="https://bondz.github.io/react-epic-spinners/">React Epic
|
||
Spinners</a> <a href="https://github.com/bondz/react-epic-spinners"><img
|
||
src="https://img.shields.io/github/stars/bondz/react-epic-spinners.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Reusable react components for spinners</li>
|
||
<li><a href="https://bvaughn.github.io/react-virtualized/">React
|
||
Virtualized</a> <a
|
||
href="https://github.com/bvaughn/react-virtualized"><img
|
||
src="https://img.shields.io/github/stars/bvaughn/react-virtualized.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - React components for virtualizing large data
|
||
sets for efficiently rendering lists and tabular data</li>
|
||
<li><a href="https://reactgrid.com/">ReactGrid</a> <a
|
||
href="https://github.com/silevis/reactgrid"><img
|
||
src="https://img.shields.io/github/stars/silevis/reactgrid.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Add spreadsheet-like behavior to your React
|
||
app</li>
|
||
<li><a href="https://styled-icons.js.org/">Styled Icons</a> <a
|
||
href="https://github.com/jacobwgillespie/styled-icons"><img
|
||
src="https://img.shields.io/github/stars/jacobwgillespie/styled-icons.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Font Awesome, Feather, Material Design, and
|
||
Octicons icon packs as Styled Components</li>
|
||
<li><code>[Paid]</code> <a href="https://www.ag-grid.com/">ag-grid</a> -
|
||
Cross platform components for Grid/Tables</li>
|
||
<li><code>[Paid]</code> <a href="https://getdataden.com/">Get Data
|
||
Den</a> - Plugin that extends your projects functionality with a table
|
||
component</li>
|
||
</ul>
|
||
<h3 id="tools">Tools</h3>
|
||
<p><a href="https://github.com/teambit/bit">Bit</a> <a
|
||
href="teambit/bitp"><img
|
||
src="https://img.shields.io/github/stars/teambit/bit.svg?label=&style=social"
|
||
alt="Repo Star" /></a> — End-to-end component sharing and management. It
|
||
takes care of component development and publishing in your library
|
||
(automatic dependency resolution, versioning etc), making each of them
|
||
individually useful to consume and develop anywhere, so teams can manage
|
||
and share components at scale.</p>
|
||
<p><a href="http://airbnb.io/react-sketchapp/">react-sketchapp</a> <a
|
||
href="https://github.com/airbnb/react-sketchapp"><img
|
||
src="https://img.shields.io/github/stars/airbnb/react-sketchapp.svg?label=&style=social"
|
||
alt="Repo Star" /></a> — render React components to Sketch; tailor-made
|
||
for design systems</p>
|
||
<h3 id="related-community-list">Related community list</h3>
|
||
<ul>
|
||
<li><a href="https://github.com/enaqx/awesome-react">Awesome React</a> -
|
||
A collection of awesome things regarding React ecosystem.</li>
|
||
<li><a
|
||
href="https://github.com/brillout/awesome-react-components">Awesome
|
||
React Component</a> - Catalog of React Components & Libraries</li>
|
||
<li><a href="https://github.com/streamich/libreact">libreact</a> <a
|
||
href="https://github.com/streamich/libreact"><img
|
||
src="https://img.shields.io/github/stars/streamich/libreact.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Collection of useful React components</li>
|
||
</ul>
|
||
<hr />
|
||
<h2 id="vuejs">VueJS</h2>
|
||
<ul>
|
||
<li><a href="https://www.agnosticui.com/">AgnosticUI</a> - Accessible
|
||
Vue 3 Component Primitives (that also work with Svelte, React, and
|
||
Angular).</li>
|
||
<li><a href="https://at.aotu.io/">AT-UI</a> <a
|
||
href="https://github.com/at-ui/at-ui"><img
|
||
src="https://img.shields.io/github/stars/at-ui/at-ui.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - A fresh and flat UI-Kit specially for desktop
|
||
application</li>
|
||
<li><a href="https://material.balmjs.com/#/">BalmUI</a> <a
|
||
href="https://github.com/balmjs/ui-vue"><img
|
||
src="https://img.shields.io/github/stars/balmjs/ui-vue.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Next Generation Material UI for Vue.js</li>
|
||
<li><a href="https://bootstrap-vue.js.org/">Bootstrap Vue</a> <a
|
||
href="https://github.com/bootstrap-vue/bootstrap-vue"><img
|
||
src="https://img.shields.io/github/stars/bootstrap-vue/bootstrap-vue.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - comprehensive implementations of Bootstrap 4
|
||
components and grid system for Vue.js and with extensive and automated
|
||
WAI-ARIA accessibility markup.</li>
|
||
<li><a href="https://buefy.github.io/">Buefy</a> <a
|
||
href="https://github.com/buefy/buefy"><img
|
||
src="https://img.shields.io/github/stars/buefy/buefy.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Lightweight UI components for Vue.js based on
|
||
Bulma, which are the library’s only two internal dependencies</li>
|
||
<li><a href="https://carvuejs.github.io/home">CarvueJS</a> <a
|
||
href="https://github.com/CarvueJS/carbon-components-vue"><img
|
||
src="https://img.shields.io/github/stars/CarvueJS/carbon-components-vue.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Carvue is a UI components library which is
|
||
based on Carbon-Design and VueJS.</li>
|
||
<li><a href="https://cion.visualjerk.de/">Cion</a> <a
|
||
href="https://github.com/visualjerk/vue-cion-design-system"><img
|
||
src="https://img.shields.io/github/stars/visualjerk/vue-cion-design-system.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - CION is a design system build primarily for
|
||
Vue.js applications. You can use it as a starting point for building
|
||
your own design system.</li>
|
||
<li><a href="https://didi.github.io/cube-ui/#/en-US">Cube UI</a> <a
|
||
href="https://github.com/didi/cube-ui"><img
|
||
src="https://img.shields.io/github/stars/didi/cube-ui.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - cube-ui is a UI component library for mobile
|
||
apps</li>
|
||
<li><a href="https://element.eleme.io/">Element</a> <a
|
||
href="https://github.com/ElemeFE/element"><img
|
||
src="https://img.shields.io/github/stars/ElemeFE/element.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Library provides a rich selection of
|
||
customizable components along with a full style-guide based on Vue
|
||
2.0</li>
|
||
<li><a href="https://baidu-design.github.io/development/veui">Enterprise
|
||
UI</a> <a href="https://github.com/ecomfe/veui"><img
|
||
src="https://img.shields.io/github/stars/ecomfe/veui.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Enterprise UI for Vue.js. Based on ONE DESIGN
|
||
from Baidu, Inc.</li>
|
||
<li><a href="https://myliang.github.io/fish-ui/">Fish-UI</a> <a
|
||
href="https://github.com/myliang/fish-ui"><img
|
||
src="https://img.shields.io/github/stars/myliang/fish-ui.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - provides a Vue-based web toolkit with neat and
|
||
clean looking components. The library supports a ES2015 + Webpack
|
||
workflow</li>
|
||
<li><a href="https://framevuerk.com/">Framevuerk</a> <a
|
||
href="https://github.com/framevuerk/framevuerk"><img
|
||
src="https://img.shields.io/github/stars/framevuerk/framevuerk.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Responsive, Multi Language, Both Direction
|
||
Support and Configurable UI Framework based on Vue.js</li>
|
||
<li><a href="https://framework7.io/vue/">Framework 7 Vue</a> <a
|
||
href="https://github.com/nolimits4web/framework7/"><img
|
||
src="https://img.shields.io/github/stars/nolimits4web/framework7.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Full featured HTML framework for building iOS
|
||
& Android apps</li>
|
||
<li><a href="https://www.heyui.top/en">HEYUI</a> <a
|
||
href="https://github.com/heyui/heyui"><img
|
||
src="https://img.shields.io/github/stars/heyui/heyui.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - UI Toolkit for Vue2.0 with cli and utils as
|
||
part of ecosystem</li>
|
||
<li><a href="https://iviewui.com/">iView</a> <a
|
||
href="https://github.com/iview/iview"><img
|
||
src="https://img.shields.io/github/stars/iview/iview.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - iView provides dozens of UI components and
|
||
widgets built with Vue.js and styled with a clean and elegant
|
||
design</li>
|
||
<li><a href="http://jsmod-vue.tedfe.com/">JSmod Vue</a> <a
|
||
href="https://github.com/chaogao/jsmod-pc-vue"><img
|
||
src="https://img.shields.io/github/stars/chaogao/jsmod-pc-vue.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - The goal of jsmod is to provide a high degree
|
||
of freedom (high scalability) ui components, and unified desktop and
|
||
mobile usage</li>
|
||
<li><a href="https://josephuspaye.github.io/Keen-UI">Keen-UI</a> <a
|
||
href="https://github.com/JosephusPaye/Keen-UI"><img
|
||
src="https://img.shields.io/github/stars/JosephusPaye/Keen-UI.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - keen-ui is a collection of Vue components
|
||
inspired by material design, but is not meant to be a full
|
||
implementation of the Material Design spec.</li>
|
||
<li><a href="https://mand-mobile.github.io/2x-doc/">Mand Mobile 2</a> <a
|
||
href="https://github.com/didi/mand-mobile"><img
|
||
src="https://img.shields.io/github/stars/didi/mand-mobile.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - A mobile UI toolkit, based on Vue.js 2,
|
||
designed for financial scenarios.</li>
|
||
<li><a href="https://matsp.github.io/material-components-vue/">Material
|
||
Components Vue</a> <a
|
||
href="https://github.com/matsp/material-components-vue"><img
|
||
src="https://img.shields.io/github/stars/matsp/material-components-vue.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Material-components-vue integrates the mdc-web
|
||
(by google) vanilla components</li>
|
||
<li><a
|
||
href="http://mdbootstrap.com/material-design-for-bootstrap/">MDBootstrap</a>
|
||
<a
|
||
href="https://github.com/mdbootstrap/Vue-Bootstrap-with-Material-Design"><img
|
||
src="https://img.shields.io/github/stars/mdbootstrap/Vue-Bootstrap-with-Material-Design.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Material Design UI KIT based on Bootstrap
|
||
4</li>
|
||
<li><a href="http://mint-ui.github.io/#!/en">Mint UI</a> <a
|
||
href="https://github.com/ElemeFE/mint-ui/"><img
|
||
src="https://img.shields.io/github/stars/ElemeFE/mint-ui.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Mobile UI elements for Vue.js</li>
|
||
<li><a href="https://muse-ui.org/">Muse UI</a> <a
|
||
href="https://github.com/museui/muse-ui"><img
|
||
src="https://img.shields.io/github/stars/museui/muse-ui.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Muse UI has more than 40 UI components and
|
||
customizable themes for Google’s Material Design</li>
|
||
<li><a href="https://nutui.jd.com/">NutUI</a> <a
|
||
href="https://github.com/jdf2e/nutui"><img
|
||
src="https://img.shields.io/github/stars/jdf2e/nutui.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - A set of Jingdong-style lightweight mobile Vue
|
||
component library</li>
|
||
<li><a href="https://n3-components.github.io/N3-components/">N3
|
||
Components</a> <a
|
||
href="https://github.com/N3-components/N3-components"><img
|
||
src="https://img.shields.io/github/stars/N3-components/N3-components.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - N3 components library is built with Vue.js, is
|
||
a powerful library for frontend or full-stack engineers to build web
|
||
pages quickly</li>
|
||
<li><a href="https://aidewoode.github.io/office-ui-fabric-vue/">Office
|
||
UI Fabric Vue</a> <a
|
||
href="https://github.com/aidewoode/office-ui-fabric-vue"><img
|
||
src="https://img.shields.io/github/stars/aidewoode/office-ui-fabric-vue.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Office UI Fabric implementation for Vue.js,
|
||
build with office-ui-fabric-js</li>
|
||
<li><a href="https://onsen.io/vue/">Onsen UI</a> <a
|
||
href="https://github.com/OnsenUI/OnsenUI"><img
|
||
src="https://img.shields.io/github/stars/OnsenUI/OnsenUI.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - More than 100 components are specially made for
|
||
Material and Flat design based on original the Onsen UI framework</li>
|
||
<li><a href="https://github.com/v1Labs/protovue">ProtoVue</a> <a
|
||
href="https://github.com/v1Labs/protovue"><img
|
||
src="https://img.shields.io/github/stars/v1Labs/protovue.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - A prototyping component library build for
|
||
Vue.js from grid to UI elements</li>
|
||
<li><a href="https://quasar-framework.org/">Quasar</a> <a
|
||
href="https://github.com/quasarframework/quasar"><img
|
||
src="https://img.shields.io/github/stars/quasarframework/quasar.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Responsive Single Page Apps, Server-side Render
|
||
Apps, Progressive Web Apps, Hybrid Mobile Apps (that look native!) &
|
||
Electron Apps with theming support.</li>
|
||
<li><a href="https://ccforward.github.io/rubik/#/">Rubik UI</a> <a
|
||
href="https://github.com/ccforward/rubik/"><img
|
||
src="https://img.shields.io/github/stars/ccforward/rubik.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Rubik UI is a Material Design style ui library
|
||
based Vue.js 2.0+ which can be used for PC and Mobile.</li>
|
||
<li><a href="https://semantic-ui-vue.github.io/">Semantic UI Vue</a> <a
|
||
href="https://github.com/Semantic-UI-Vue/Semantic-UI-Vue"><img
|
||
src="https://img.shields.io/github/stars/Semantic-UI-Vue/Semantic-UI-Vue.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Semantic UI Vue is the official VueJS
|
||
integration for Semantic UI.It’s used by Netflix, Amazon and other major
|
||
organizations.</li>
|
||
<li><a href="https://guilhermewaess.github.io/SemVue">SemVue</a> <a
|
||
href="https://github.com/guilhermewaess/SemVue"><img
|
||
src="https://img.shields.io/github/stars/guilhermewaess/SemVue.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Semantic-ui components easy in your vue
|
||
project</li>
|
||
<li><a href="https://space-kit.netlify.com">Space-kit</a> <a
|
||
href="https://github.com/apollographql/space-kit"><img
|
||
src="https://img.shields.io/github/stars/apollographql/space-kit.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - The home base for Apollo’s design system, Space
|
||
Kit provides essential design resources for developers to use in the
|
||
Apollo-branded interfaces.</li>
|
||
<li><a href="https://vuejs.github.io/ui">UI</a> <a
|
||
href="https://github.com/vuejs/ui"><img
|
||
src="https://img.shields.io/github/stars/vuejs/ui.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - UI components for official Vue organization
|
||
apps</li>
|
||
<li><a href="https://uiv.wxsm.space/">Uiv</a> <a
|
||
href="https://github.com/wxsms/uiv"><img
|
||
src="https://img.shields.io/github/stars/wxsms/uiv.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Uiv is a Bootstrap 3 component library for Vue
|
||
2. All component combined are ~20KB, and the only external dependencies
|
||
are Vue and Bootstrap CSS</li>
|
||
<li><a href="https://youzan.github.io/vant">Vant</a> <a
|
||
href="https://github.com/youzan/vant"><img
|
||
src="https://img.shields.io/github/stars/youzan/vant.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Lightweight Mobile UI Components built on
|
||
Vue</li>
|
||
<li><a href="https://vuetifyjs.com/">Vuetify</a> <a
|
||
href="https://github.com/vuetifyjs/vuetify"><img
|
||
src="https://img.shields.io/github/stars/vuetifyjs/vuetify.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Vue.js components implemented according to
|
||
Google’s material design guidelines. Vuetify supports all modern
|
||
browsers across platforms, including IE11 and Safari 9+</li>
|
||
<li><a href="https://github.com/chenz24/vue-blu">Vueblu</a> <a
|
||
href="https://github.com/chenz24/vue-blu"><img
|
||
src="https://img.shields.io/github/stars/chenz24/vue-blu.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - UI Component Library Base on Vue.js(2.x) and
|
||
Bulma</li>
|
||
<li><a href="https://vuecidity.wemakesites.net/">Vuecidity</a> -
|
||
component library inspired by Google Material Design and Bootstrap with
|
||
set of 30+ UI components, 24-column responsive layout grid system.</li>
|
||
<li><a href="https://www.vuedarkmode.com/">Vuedarkmode</a> <a
|
||
href="https://github.com/LeCoupa/vuedarkmode"><img
|
||
src="https://img.shields.io/github/stars/LeCoupa/vuedarkmode.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - A minimilistic set of components designed for
|
||
the insomniacs who enjoy dark interfaces as much as we do.</li>
|
||
<li><a href="https://sudheerj.github.io/vueface/#/">VueFace</a> <a
|
||
href="https://github.com/sudheerj/vueface"><img
|
||
src="https://img.shields.io/github/stars/sudheerj/vueface.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Component library for VueJS framework with
|
||
around 40 components with support of 20+ themes.</li>
|
||
<li><a href="https://github.com/vouill/vue-bulma-components">Vue
|
||
Bulma</a> <a href="https://github.com/vouill/vue-bulma-components"><img
|
||
src="https://img.shields.io/github/stars/vouill/vue-bulma-components.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Translate Bulma css api to vue components</li>
|
||
<li><a href="http://www.myronliu.com/vue-carbon">Vue Carbon</a> <a
|
||
href="https://github.com/myronliu347/vue-carbon"><img
|
||
src="https://img.shields.io/github/stars/myronliu347/vue-carbon.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Material design style mobile UI library, design
|
||
resource reference <a
|
||
href="https://github.com/framework7io/framework7">FrameWork7</a></li>
|
||
<li><a href="https://vuematerial.io/">Vue Material</a> <a
|
||
href="https://github.com/vuematerial/vue-material"><img
|
||
src="https://img.shields.io/github/stars/vuematerial/vue-material.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - library implementing Googles material design.
|
||
The library also provides a webpack boilerplate, SSR template for
|
||
Nuxt.js and a single HTML file to start with the framework</li>
|
||
<li><a href="https://vue-native.io/">Vue Native</a> <a
|
||
href="https://github.com/GeekyAnts/vue-native-core"><img
|
||
src="https://img.shields.io/github/stars/GeekyAnts/vue-native-core.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Vue Native is a framework to build cross
|
||
platform native mobile apps using JavaScript</li>
|
||
<li><a href="https://stasson.github.io/vue-mdc-adapter/#/">Vue MDC
|
||
Adapter</a> <a href="https://github.com/stasson/vue-mdc-adapter"><img
|
||
src="https://img.shields.io/github/stars/stasson/vue-mdc-adapter.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Integration of Material Components for Vue.js
|
||
which follows the best practices recommended by Google</li>
|
||
<li><a href="https://github.com/posva/vue-mdc">Vue MDC</a> <a
|
||
href="https://github.com/posva/vue-mdc"><img
|
||
src="https://img.shields.io/github/stars/posva/vue-mdc.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - This is the adaptation of Material Components
|
||
web for Vue.js</li>
|
||
<li><a href="http://vue.ydui.org/">Vue YDUI</a> <a
|
||
href="https://github.com/ydcss/vue-ydui"><img
|
||
src="https://img.shields.io/github/stars/ydcss/vue-ydui.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - A mobile components Library with Vue2.js</li>
|
||
<li><a href="https://vuido.mimec.org/">Vuido</a> <a
|
||
href="https://github.com/mimecorg/vuido"><img
|
||
src="https://img.shields.io/github/stars/mimecorg/vuido.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Native desktop applications using Vue.js.</li>
|
||
<li><a href="https://vuikit.js.org/">Vuikit</a> <a
|
||
href="https://github.com/vuikit/vuikit"><img
|
||
src="https://img.shields.io/github/stars/vuikit/vuikit.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - A responsive Vue 2 UI library for web site
|
||
interfaces based on the UIkit 3 framework.</li>
|
||
<li><a href="https://vux.li/">Vux</a> <a
|
||
href="https://github.com/airyland/vux"><img
|
||
src="https://img.shields.io/github/stars/airyland/vux.svg?label=&style=social"
|
||
alt="Repo Star" /></a> -Mobile UI Components based on WeUI</li>
|
||
<li><a href="https://github.com/eddow/v-semantic">v-semantic</a> <a
|
||
href="https://github.com/eddow/v-semantic"><img
|
||
src="https://img.shields.io/github/stars/eddow/v-semantic.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Integration of semantic-ui2 with vue.js2.</li>
|
||
<li><a href="http://okoala.github.io/vue-antd">vue-antd</a> <a
|
||
href="https://github.com/okoala/vue-antd"><img
|
||
src="https://img.shields.io/github/stars/okoala/vue-antd.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Here is the Vue implementation of Ant Design,
|
||
which develops and serves enterprise back-end products.</li>
|
||
<li><a href="https://fe-driver.github.io/vue-beauty/">vue-beauty</a> <a
|
||
href="https://github.com/FE-Driver/vue-beauty"><img
|
||
src="https://img.shields.io/github/stars/FE-Driver/vue-beauty.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - UI components build with vue and ant
|
||
design</li>
|
||
<li><a
|
||
href="http://kzima.github.io/vuestrap-base-components/#/">vuestrap-base-components</a>
|
||
<a href="https://github.com/kzima/vuestrap-base-components"><img
|
||
src="https://img.shields.io/github/stars/kzima/vuestrap-base-components.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Vuestrap Base Components extend Bootstrap 4.
|
||
Built with vuestrap, plain Vue.js and Webpack.</li>
|
||
<li><a href="http://morgul.github.io/vueboot/">VueBoot</a> <a
|
||
href="https://github.com/Morgul/vueboot"><img
|
||
src="https://img.shields.io/github/stars/Morgul/vueboot.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Vuejs components and directives written using
|
||
Bootstrap v4, leveraging the official Bootstrap JS.</li>
|
||
<li><a href="https://lusaxweb.github.io/vuesax/">Vuesax</a> <a
|
||
href="https://github.com/lusaxweb/vuesax"><img
|
||
src="https://img.shields.io/github/stars/lusaxweb/vuesax.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Vuesax is a library of Vuejs components that
|
||
facilitates front-end development and streamlines work with great visual
|
||
quality.</li>
|
||
<li><a href="https://wffranco.github.io/vue-strap/">VueStrap</a> <a
|
||
href="https://github.com/wffranco/vue-strap"><img
|
||
src="https://img.shields.io/github/stars/wffranco/vue-strap.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - a set of native Vue.js components based on
|
||
Bootstrap’s markup and CSS. No dependency on jQuery or Bootstrap’s
|
||
JavaScript.</li>
|
||
<li><a href="https://wdfe.github.io/wdui">WDUI</a> <a
|
||
href="https://github.com/wdfe/wdui"><img
|
||
src="https://img.shields.io/github/stars/wdfe/wdui.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Lightweight mobile UI control library to
|
||
quickly build an app layout based on Vue 2.0</li>
|
||
<li><a href="https://zircleui.github.io/docs/?utm_source=zircle">Zircle
|
||
UI</a> <a href="https://github.com/zircleUI/zircleUI"><img
|
||
src="https://img.shields.io/github/stars/zircleUI/zircleUI.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - A frontend library to develop zoomable user
|
||
interfaces</li>
|
||
<li><code>[Paid]</code><a
|
||
href="https://www.syncfusion.com/vue-ui-components">Essential JS 2 for
|
||
Vue by Syncfusion</a> - Over 60 high-performance, lightweight, modular,
|
||
and responsive UI components for Vue.</li>
|
||
<li><a
|
||
href="https://github.com/matteobruni/tsparticles">Particles.vue</a> -
|
||
Vue library for easily add fully customizable particles animations to
|
||
websites and web applications.</li>
|
||
<li><code>[Paid]</code><a
|
||
href="https://www.telerik.com/kendo-vue-ui">Kendo UI for Vue</a> - A
|
||
suite of UI components focused on business applications, with components
|
||
like the data grid</li>
|
||
<li><a
|
||
href="https://github.com/canopas/web-file-upload/vue">vue-file-upload</a>
|
||
- A file management system built that allows for single and multiple
|
||
file uploading with a preview feature</li>
|
||
</ul>
|
||
<h3 id="special-use-case-libraries-1">Special use case libraries</h3>
|
||
<ul>
|
||
<li><a href="https://epic-spinners.epicmax.co/#/">Epic Spinners</a> <a
|
||
href="https://github.com/epicmaxco/epic-spinners"><img
|
||
src="https://img.shields.io/github/stars/epicmaxco/epic-spinners.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Reusable Vue components for spinners</li>
|
||
<li><code>[Paid]</code><a
|
||
href="https://www.jqwidgets.com/vue-js-ui-components-for-jqwidgets/">jQWidgets</a>
|
||
- Vue components based on jqwidgets.</li>
|
||
</ul>
|
||
<h3 id="related-community-list-1">Related community list</h3>
|
||
<ul>
|
||
<li><a href="https://github.com/vuejs/awesome-vue">Awesome Vue</a> - A
|
||
curated list of awesome things related to Vue.js</li>
|
||
</ul>
|
||
<hr />
|
||
<h2 id="react-native">React Native</h2>
|
||
<ul>
|
||
<li><a href="https://rn.mobile.ant.design/">Ant Design Mobile RN</a> <a
|
||
href="https://github.com/ant-design/ant-design-mobile-rn"><img
|
||
src="https://img.shields.io/github/stars/ant-design/ant-design-mobile-rn.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - A Ant design based configurable Mobile UI
|
||
component library based on React Native</li>
|
||
<li><a href="https://blankapp.org/">Blankapp</a> <a
|
||
href="https://github.com/blankapp/ui"><img
|
||
src="https://img.shields.io/github/stars/blankapp/ui.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Highly customizable and theming components for
|
||
React Native</li>
|
||
<li><a href="https://getcarbonnative.com/">Carbon Native</a> <a
|
||
href="https://github.com/carbon-native/carbon-native"><img
|
||
src="https://img.shields.io/github/stars/carbon-native/carbon-native.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - A set of UI components for building React
|
||
Native apps.</li>
|
||
<li><a href="https://avocode.com/nachos-ui/">Nachos UI</a> <a
|
||
href="https://github.com/nachos-ui/nachos-ui"><img
|
||
src="https://img.shields.io/github/stars/nachos-ui/nachos-ui.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Customizable ready to use 30+ components which
|
||
works with <a href="https://github.com/necolas/react-native-web">React
|
||
Native for Web</a></li>
|
||
<li><a href="https://nativebase.io/">NativeBase</a> <a
|
||
href="https://github.com/GeekyAnts/NativeBase"><img
|
||
src="https://img.shields.io/github/stars/GeekyAnts/NativeBase.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Essential cross-platform UI components for
|
||
React Native. One of best in class for React Native Lovers.
|
||
Recommended!</li>
|
||
<li><a href="https://github.com/panza-org/panza">Panza</a> <a
|
||
href="https://github.com/panza-org/panza"><img
|
||
src="https://img.shields.io/github/stars/panza-org/panza.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Panza is a collection of stateless, functional
|
||
ui-components for react-native, and heavily inspired by the excellent
|
||
rebass library.</li>
|
||
<li><a href="https://github.com/adbayb/react-native-android-kit">React
|
||
Native Android Kit</a> <a
|
||
href="https://github.com/adbayb/react-native-android-kit"><img
|
||
src="https://img.shields.io/github/stars/adbayb/react-native-android-kit.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - A set of native Android UI components and
|
||
modules for React Native framework that are currently not implemented by
|
||
React Native core team</li>
|
||
<li><a href="https://rghorbani.github.io/react-native-common/">React
|
||
Native Common</a> <a
|
||
href="https://github.com/rghorbani/react-native-common"><img
|
||
src="https://img.shields.io/github/stars/rghorbani/react-native-common.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Cross Platform React Native UI Toolkit &
|
||
API</li>
|
||
<li><a
|
||
href="https://react-native-training.github.io/react-native-elements">React
|
||
Native Elements</a> <a
|
||
href="https://github.com/react-native-training/react-native-elements"><img
|
||
src="https://img.shields.io/github/stars/react-native-training/react-native-elements.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Cross Platform React Native UI Toolkit. Support
|
||
for customisation and provides an all-in-one UI kit for creating apps in
|
||
react native</li>
|
||
<li><a href="https://github.com/wix/react-native-gifted-chat">React
|
||
Native Gifted Chat</a> <a
|
||
href="https://github.com/wix/react-native-gifted-chat"><img
|
||
src="https://img.shields.io/github/stars/wix/react-native-gifted-chat.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Chat UI components for React Native (formerly
|
||
known as Gifted Messenger)</li>
|
||
<li><a href="http://react-native-material-design.github.io/">React
|
||
Native Material Design</a> <a
|
||
href="https://github.com/react-native-material-design/react-native-material-design"><img
|
||
src="https://img.shields.io/github/stars/react-native-material-design/react-native-material-design.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - React Native components which implement
|
||
Material Design. (No longer maintained in favour of Material Paper)</li>
|
||
<li><a href="http://xinthink.github.io/react-native-material-kit/">React
|
||
Native Material Kit</a> <a
|
||
href="https://github.com/xinthink/react-native-material-kit"><img
|
||
src="https://img.shields.io/github/stars/xinthink/react-native-material-kit.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - A set of UI components, in the purpose of
|
||
introducing Material Design to apps built with React Native</li>
|
||
<li><a href="https://github.com/xotahal/react-native-material-ui">React
|
||
Native Material UI</a> <a
|
||
href="https://github.com/xotahal/react-native-material-ui"><img
|
||
src="https://img.shields.io/github/stars/xotahal/react-native-material-ui.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Highly customizable material design components
|
||
for React Native. Demo for this toolkit can be seen <a
|
||
href="https://github.com/xotahal/react-native-material-ui/blob/master/docs/Demo.md">here</a></li>
|
||
<li><a href="https://callstack.github.io/react-native-paper/">React
|
||
Native Paper</a> <a
|
||
href="https://github.com/callstack/react-native-paper"><img
|
||
src="https://img.shields.io/github/stars/callstack/react-native-paper.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Component with follows Material design
|
||
guidelines v2.0, Better RTL Support and full theming options</li>
|
||
<li><a
|
||
href="https://akveo.github.io/react-native-ui-kitten/#/home">React
|
||
Native UI Kitten</a> <a
|
||
href="https://github.com/akveo/react-native-ui-kitten"><img
|
||
src="https://img.shields.io/github/stars/akveo/react-native-ui-kitten.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Mobile framework with easily customizable
|
||
elements which is able to create style configurations of components you
|
||
use the most (buttons, inputs etc.)</li>
|
||
<li><a href="https://wix.github.io/react-native-ui-lib/">React Native UI
|
||
Lib</a> <a href="https://github.com/wix/react-native-ui-lib"><img
|
||
src="https://img.shields.io/github/stars/wix/react-native-ui-lib.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - UI Toolset & Components Library for React
|
||
Native</li>
|
||
<li><a href="http://necolas.github.io/react-native-web/examples/">React
|
||
Native Web</a> <a
|
||
href="https://github.com/necolas/react-native-web"><img
|
||
src="https://img.shields.io/github/stars/necolas/react-native-web.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - “React Native for Web” makes it possible to run
|
||
React Native components and APIs on the web using React DOM</li>
|
||
<li><a href="https://trixieapp.github.io/react-virgin/">React Virgin</a>
|
||
<a href="https://github.com/Trixieapp/react-virgin"><img
|
||
src="https://img.shields.io/github/stars/Trixieapp/react-virgin.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - UI kit with boiler plate for your React-Native
|
||
projects</li>
|
||
<li><a
|
||
href="https://shoutem.github.io/docs/ui-toolkit/introduction">Shoutem
|
||
UI</a> <a href="https://github.com/shoutem/ui"><img
|
||
src="https://img.shields.io/github/stars/shoutem/ui.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - styleable components for React Native
|
||
applications for iOS and Android. All of our components are built to be
|
||
both composable and customizable.</li>
|
||
<li><a href="https://github.com/rilyu/teaset">Teaset</a> <a
|
||
href="https://github.com/rilyu/teaset"><img
|
||
src="https://img.shields.io/github/stars/rilyu/teaset.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - A UI library for react native, provides 20+
|
||
pure JS(ES6) components, focusing on content display and action
|
||
control.</li>
|
||
</ul>
|
||
<h3 id="special-use-case-libraries-2">Special use case libraries</h3>
|
||
<ul>
|
||
<li><a href="https://github.com/wix/react-native-calendars">React Native
|
||
Calendars</a> <a
|
||
href="https://github.com/wix/react-native-calendars"><img
|
||
src="https://img.shields.io/github/stars/wix/react-native-calendars.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - various customizable react native calendar
|
||
components.</li>
|
||
<li><a href="https://github.com/tomauty/react-native-chart">React Native
|
||
Chart</a> <a href="https://github.com/tomauty/react-native-chart"><img
|
||
src="https://img.shields.io/github/stars/tomauty/react-native-chart.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Add line, area, pie, and bar charts to your
|
||
React Native app</li>
|
||
<li><a
|
||
href="https://github.com/bartgryszko/react-native-circular-progress">React
|
||
Native Circular Progress</a> <a
|
||
href="https://github.com/bartgryszko/react-native-circular-progress"><img
|
||
src="https://img.shields.io/github/stars/bartgryszko/react-native-circular-progress.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - React Native component for creating animated,
|
||
circular progress with ReactART</li>
|
||
<li><a href="https://github.com/maxs15/react-native-spinkit">React
|
||
Native Spinkit</a> <a
|
||
href="https://github.com/maxs15/react-native-spinkit"><img
|
||
src="https://img.shields.io/github/stars/maxs15/react-native-spinkit.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - A collection of animated loading indicators for
|
||
React Native</li>
|
||
</ul>
|
||
<h3 id="related-community-list-2">Related community list</h3>
|
||
<ul>
|
||
<li><a href="https://native.directory">Native Directory</a> - Native
|
||
Directory is a curated list of React Native libraries to help you build
|
||
your projects.</li>
|
||
<li><a href="https://github.com/jondot/awesome-react-native">Awesome
|
||
React Native</a> - Awesome React Native components, news, tools, and
|
||
learning material!</li>
|
||
</ul>
|
||
<hr />
|
||
<h2 id="angular">Angular</h2>
|
||
<ul>
|
||
<li><a href="https://www.agnosticui.com/">AgnosticUI</a> - Accessible
|
||
Angular Component Primitives (that also work with Svelte, React, and Vue
|
||
3).</li>
|
||
<li><a
|
||
href="https://alfresco.github.io/adf-component-catalog/">Alfresco</a> <a
|
||
href="https://github.com/Alfresco/alfresco-ng2-components"><img
|
||
src="https://img.shields.io/github/stars/Alfresco/alfresco-ng2-components.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Alfresco Application Development Framework
|
||
(ADF) is set of Angular components with directives, pipes, and other
|
||
interfaces. Should be treated as framework.</li>
|
||
<li><a href="https://alyle-ui.firebaseapp.com/">Alyle UI</a> <a
|
||
href="https://github.com/A-l-y-l-e/Alyle-UI"><img
|
||
src="https://img.shields.io/github/stars/A-l-y-l-e/Alyle-UI.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Minimal Design, a set of components for
|
||
Angular.</li>
|
||
<li><a href="http://ng-at.thunderjava.com/">AT Angular UI</a> <a
|
||
href="https://github.com/100cm/at-ui-angular"><img
|
||
src="https://img.shields.io/github/stars/100cm/at-ui-angular.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Angular 4.0+ front-end UI component library
|
||
based on the rapid development of back-end products in PC websites.</li>
|
||
<li><a href="https://vmware.github.io/clarity/">Clarity</a> <a
|
||
href="https://github.com/vmware/clarity"><img
|
||
src="https://img.shields.io/github/stars/vmware/clarity.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Clarity is an open source design system by
|
||
VMware that brings together UX guidelines, an HTML/CSS framework, and
|
||
Angular components</li>
|
||
<li><a href="https://teradata.github.io/covalent/#/">Covalent</a> <a
|
||
href="https://github.com/Teradata/covalent"><img
|
||
src="https://img.shields.io/github/stars/Teradata/covalent.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Teradata UI Platform built on Angular
|
||
Material</li>
|
||
<li><a href="https://element-angular.faas.ele.me/">Element</a> <a
|
||
href="https://github.com/ElemeFE/element-angular"><img
|
||
src="https://img.shields.io/github/stars/ElemeFE/element-angular.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Initially build for VueJs, Library provides a
|
||
rich selection of customizable components along with a full
|
||
style-guide</li>
|
||
<li><a href="http://fuelinteractive.github.io/fuel-ui/#/">Fuel UI</a> <a
|
||
href="https://github.com/FuelInteractive/fuel-ui"><img
|
||
src="https://img.shields.io/github/stars/FuelInteractive/fuel-ui.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Fuel-UI is a collection of native Angular 2
|
||
components, directives, and pipes for Bootstrap 4.</li>
|
||
<li><a href="https://akveo.github.io/nebular/">Nebular</a> <a
|
||
href="https://github.com/akveo/nebular"><img
|
||
src="https://img.shields.io/github/stars/akveo/nebular.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - UI Toolkit with Components, Auth & Security
|
||
for your next Angular7 App</li>
|
||
<li><a href="https://valor-software.com/ngx-bootstrap/#/">NGX
|
||
Bootstrap</a> <a
|
||
href="https://github.com/valor-software/ngx-bootstrap"><img
|
||
src="https://img.shields.io/github/stars/valor-software/ngx-bootstrap.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Bootstrap 3/Bootstrap 4 Components with
|
||
Angular, for both Mobile and Desktop.</li>
|
||
<li><a href="https://github.com/bartholomej/ngx-scrolltop">NGX
|
||
ScrollTop</a> <a
|
||
href="https://github.com/bartholomej/ngx-scrolltop"><img
|
||
src="https://img.shields.io/github/stars/bartholomej/ngx-scrolltop.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Lightweight, Material Design inspired button
|
||
for scroll-to-top of the page. <em>No dependencies. Pure
|
||
Angular!</em></li>
|
||
<li><a href="https://swimlane.github.io/ngx-ui/">NGX UI</a> <a
|
||
href="https://github.com/swimlane/ngx-ui"><img
|
||
src="https://img.shields.io/github/stars/swimlane/ngx-ui.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Component & Style Library for Angular by
|
||
Swimlane.</li>
|
||
<li><a href="https://ng-bootstrap.github.io/">NG Bootstrap</a> <a
|
||
href="https://github.com/ng-bootstrap/ng-bootstrap"><img
|
||
src="https://img.shields.io/github/stars/ng-bootstrap/ng-bootstrap.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - replacing <a
|
||
href="https://github.com/angular-ui/bootstrap">angular-ui</a> bootstrap
|
||
which is no longer maintained, it provides Bootstrap 4 components for
|
||
Angular with no 3rd party JS dependencies</li>
|
||
<li><a href="http://ng-lightning.github.io/ng-lightning/">NG
|
||
Lightning</a> <a
|
||
href="https://github.com/ng-lightning/ng-lightning"><img
|
||
src="https://img.shields.io/github/stars/ng-lightning/ng-lightning.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Angular components built for the Saleforce
|
||
Lightning Design System</li>
|
||
<li><a href="https://ng-semantic.herokuapp.com/">NG Semantic-UI</a> <a
|
||
href="https://github.com/vladotesanovic/ngSemantic"><img
|
||
src="https://img.shields.io/github/stars/vladotesanovic/ngSemantic.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Angular UI building blocks based on
|
||
Semantic-UI</li>
|
||
<li><a href="https://ng.ant.design/?p=/docs/introduce/en">NG-ZORRO</a>
|
||
<a href="https://github.com/NG-ZORRO/ng-zorro-antd"><img
|
||
src="https://img.shields.io/github/stars/NG-ZORRO/ng-zorro-antd.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - NG-ZORRO components aim to provide an
|
||
enterprise-class UI based on Ant Design</li>
|
||
<li><a href="https://material.angular.io/">Material 2</a> <a
|
||
href="https://github.com/angular/material2"><img
|
||
src="https://img.shields.io/github/stars/angular/material2.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Angular’s official component library
|
||
implementing Google’s material design, built with Angular and
|
||
TypeScript</li>
|
||
<li><a
|
||
href="http://mdbootstrap.com/material-design-for-bootstrap/">MDBootstrap</a>
|
||
<a
|
||
href="https://github.com/mdbootstrap/Angular-Bootstrap-with-Material-Design"><img
|
||
src="https://img.shields.io/github/stars/mdbootstrap/Angular-Bootstrap-with-Material-Design.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Material Design UI KIT based on Bootstrap
|
||
4</li>
|
||
<li><a href="https://onsen.io/angular2/">Onsen UI</a> <a
|
||
href="https://github.com/OnsenUI/OnsenUI"><img
|
||
src="https://img.shields.io/github/stars/OnsenUI/OnsenUI.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - More than 100 components are specially made for
|
||
Material and Flat design based on original the Onsen UI framework</li>
|
||
<li><a href="https://www.patternfly.org">PatternFly NG</a> <a
|
||
href="https://github.com/patternfly/patternfly-ng"><img
|
||
src="https://img.shields.io/github/stars/patternfly/patternfly-ng.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - A set of Angular 6+ components for the <a
|
||
href="https://github.com/patternfly/patternfly-design-kit">PatternFly
|
||
project</a>. It also has support for Angular 4 and 5.</li>
|
||
<li><a href="https://www.primefaces.org/primeng/#/">Prime NG</a> <a
|
||
href="https://github.com/primefaces/primeng"><img
|
||
src="https://img.shields.io/github/stars/primefaces/primeng.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - This project which provides a rich and unique
|
||
selection of over 60 UI components with multiple themes</li>
|
||
<li><a href="https://primer.style/components">Primer Components</a> <a
|
||
href="https://github.com/primer/components"><img
|
||
src="https://img.shields.io/github/stars/primer/components.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - React components for the <a
|
||
href="https://primer.style/">Primer Design System</a></li>
|
||
<li><a
|
||
href="https://github.com/Semantic-Org/Semantic-UI-Angular">Semantic UI
|
||
Angular</a> <a
|
||
href="https://github.com/Semantic-Org/Semantic-UI-Angular"><img
|
||
src="https://img.shields.io/github/stars/Semantic-Org/Semantic-UI-Angular.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Semantic UI Angular is the official Angular
|
||
integration for Semantic UI.It’s used by Netflix, Amazon and other major
|
||
organizations.</li>
|
||
<li><code>[Paid]</code><a
|
||
href="https://www.syncfusion.com/angular-ui-components">Essential JS 2
|
||
for Angular by Syncfusion</a> - Over 60 high-performance, lightweight,
|
||
modular, and responsive UI components for Angular.</li>
|
||
<li><a href="https://github.com/matteobruni/tsparticles">NG
|
||
Particles</a> - Angular component for easily add fully customizable
|
||
particles animations to websites and web applications</li>
|
||
</ul>
|
||
<h3 id="special-use-case-libraries-3">Special use case libraries</h3>
|
||
<ul>
|
||
<li><a href="https://valor-software.com/ng2-charts">NG2 Charts</a> <a
|
||
href="https://github.com/valor-software/ng2-charts"><img
|
||
src="https://img.shields.io/github/stars/valor-software/ng2-charts.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Angular directives for 6 different types of
|
||
charts, with properties based on chart.js.</li>
|
||
<li><a href="https://valor-software.com/ng2-dragula/">NG2 Dragula</a> <a
|
||
href="https://github.com/valor-software/ng2-dragula"><img
|
||
src="https://img.shields.io/github/stars/valor-software/ng2-dragula.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Official Angular wrapper for dragula for drag
|
||
and drop</li>
|
||
</ul>
|
||
<h3 id="related-community-list-3">Related community list</h3>
|
||
<ul>
|
||
<li><a href="https://github.com/gdi2290/awesome-angular">Awesome
|
||
Angular</a> - A curated list of awesome Angular resources</li>
|
||
<li><a
|
||
href="https://github.com/brillout/awesome-angular-components">Awesome
|
||
Angular Components</a> - Catalog of Angular 2+ Components &
|
||
Libraries</li>
|
||
</ul>
|
||
<hr />
|
||
<h2 id="emberjs">EmberJS</h2>
|
||
<ul>
|
||
<li><a href="https://www.ember-bootstrap.com/">Ember Bootstrap</a> <a
|
||
href="https://github.com/kaliber5/ember-bootstrap/"><img
|
||
src="https://img.shields.io/github/stars/kaliber5/ember-bootstrap.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Ember-cli addon for using Bootstrap as native
|
||
Ember components</li>
|
||
<li><a href="http://indexiatech.github.io/ember-components">Ember
|
||
Components</a> <a
|
||
href="https://github.com/indexiatech/ember-components"><img
|
||
src="https://img.shields.io/github/stars/indexiatech/ember-components.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - This project aims to be the successor of <a
|
||
href="https://github.com/ember-addons/bootstrap-for-ember">Bootstrap for
|
||
Ember</a> project as all components on this suite are not bound to any
|
||
specific CSS framework.</li>
|
||
<li><a href="http://mike1234.com/ember-material-design">Ember Material
|
||
Design</a> <a
|
||
href="https://github.com/mike1o1/ember-material-design"><img
|
||
src="https://img.shields.io/github/stars/mike1o1/ember-material-design.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Implementation of Material Design in
|
||
EmberJS</li>
|
||
<li><a href="http://mike.works/ember-material-lite">Ember Material
|
||
Lite</a> <a
|
||
href="https://github.com/mike-north/ember-material-lite"><img
|
||
src="https://img.shields.io/github/stars/mike-north/ember-material-lite.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Material Design Lite for Ember.js Apps</li>
|
||
<li><a href="https://github.com/adfinis-sygroup/ember-uikit">Ember
|
||
UIkit</a> <a href="https://github.com/adfinis-sygroup/ember-uikit"><img
|
||
src="https://img.shields.io/github/stars/adfinis-sygroup/ember-uikit.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - This addon is a wrapper for the CSS library
|
||
UIkit which exposes certain components to give users an easy way for
|
||
using UIkit in ember apps.</li>
|
||
<li><a href="https://semantic-org.github.io/Semantic-UI-Ember/">Semantic
|
||
UI Ember</a> <a
|
||
href="https://github.com/Semantic-Org/Semantic-UI-Ember"><img
|
||
src="https://img.shields.io/github/stars/Semantic-Org/Semantic-UI-Ember.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Semantic UI Ember is the official EmberJS
|
||
integration for Semantic UI.It’s used by Netflix, Amazon and other major
|
||
organizations.</li>
|
||
<li><a href="http://softlayer.github.io/sl-ember-components/">SL Ember
|
||
Components</a> <a
|
||
href="https://github.com/softlayer/sl-ember-components"><img
|
||
src="https://img.shields.io/github/stars/softlayer/sl-ember-components.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - An Ember CLI Addon that provides a variety of
|
||
UI components.</li>
|
||
<li><a
|
||
href="https://github.com/lifegadget/ui-bootstrap">UI-bootstrap</a> <a
|
||
href="https://github.com/lifegadget/ui-bootstrap"><img
|
||
src="https://img.shields.io/github/stars/lifegadget/ui-bootstrap.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - An Ember-flavoured Bootstrap 4.x
|
||
eco-system</li>
|
||
</ul>
|
||
<h3 id="special-use-case-libraries-4">Special use case libraries</h3>
|
||
<ul>
|
||
<li><a href="https://www.anychart.com/">AnyChart-Ember</a> <a
|
||
href="https://github.com/AnyChart/AnyChart-Ember"><img
|
||
src="https://img.shields.io/github/stars/AnyChart/AnyChart-Ember.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - AnyChart Component for Ember CLI provides an
|
||
easy way to use AnyChart JavaScript Charts with Ember Framework</li>
|
||
</ul>
|
||
<h3 id="related-community-list-4">Related community list</h3>
|
||
<ul>
|
||
<li><a href="https://github.com/nmec/awesome-ember">Awesome Ember</a> -
|
||
A curated list of awesome Ember.js things.</li>
|
||
</ul>
|
||
<hr />
|
||
<h2 id="mithril">Mithril</h2>
|
||
<ul>
|
||
<li><a href="https://vrimar.github.io/construct-ui/">Construct UI</a> <a
|
||
href="https://github.com/vrimar/construct-ui"><img
|
||
src="https://img.shields.io/github/stars/vrimar/construct-ui.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - A UI kit for mithriljs with many common
|
||
components inspired by blueprint</li>
|
||
<li><a
|
||
href="https://arthurclemens.github.io/polythene-demos/mithril/#/">Polythene</a>
|
||
<a href="https://github.com/ArthurClemens/Polythene"><img
|
||
src="https://img.shields.io/github/stars/ArthurClemens/Polythene.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Material Design component library for
|
||
Mithril</li>
|
||
<li><a
|
||
href="https://erikvullings.github.io/mithril-materialized/index.html">Mithril-Materialized</a>
|
||
<a href="https://github.com/erikvullings/mithril-materialized"><img
|
||
src="https://img.shields.io/github/stars/erikvullings/mithril-materialized.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - a materialized-CSS Mithril components
|
||
library</li>
|
||
<li><a href="https://github.com/khalti/mithril-ui">mithril-ui</a> <a
|
||
href="https://github.com/khalti/mithril-ui"><img
|
||
src="https://img.shields.io/github/stars/khalti/mithril-ui.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - UI components for Mithril.js</li>
|
||
</ul>
|
||
<h3 id="related-community-list-5">Related community list</h3>
|
||
<ul>
|
||
<li><a href="https://github.com/orbitbot/awesome-mithril">Awesome
|
||
Mithril</a> - A curated list of Mithril awesome</li>
|
||
</ul>
|
||
<hr />
|
||
<h2 id="web-components">Web Components</h2>
|
||
<ul>
|
||
<li><a href="https://web-padawan.github.io/aybolit">Aybolit</a> <a
|
||
href="https://github.com/web-padawan/aybolit"><img
|
||
src="https://img.shields.io/github/stars/web-padawan/aybolit.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Lightweight, standards-based, framework
|
||
agnostic web components library built with LitElement</li>
|
||
<li><a href="https://github.com/elix/elix">Elix</a> <a
|
||
href="https://github.com/elix/elix"><img
|
||
src="https://img.shields.io/github/stars/elix/elix.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - High-quality, customizable web components for
|
||
common user interface patterns</li>
|
||
<li><a
|
||
href="https://github.com/material-components/material-components-web-components">Material
|
||
Web Components</a> <a
|
||
href="https://github.com/material-components/material-components-web-components"><img
|
||
src="https://img.shields.io/github/stars/material-components/material-components-web-components.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Material Design implemented as Web
|
||
Components</li>
|
||
<li><a
|
||
href="https://dannymoerkerke.github.io/material-webcomponents">Material
|
||
Web Components (Custom Elements)</a> by DannyMoerkerke <a
|
||
href="https://github.com/DannyMoerkerke/material-webcomponents"><img
|
||
src="https://img.shields.io/github/stars/DannyMoerkerke/material-webcomponents.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Custom Elements for Material Design</li>
|
||
<li><a href="https://github.com/vaadin/vaadin">Vaadin components</a> <a
|
||
href="https://github.com/vaadin/vaadin"><img
|
||
src="https://img.shields.io/github/stars/vaadin/vaadin.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Evolving set of high-quality web components for
|
||
building business web applications</li>
|
||
<li><a href="https://github.com/wiredjs/wired-elements">Wired
|
||
Elements</a> <a href="https://github.com/wiredjs/wired-elements"><img
|
||
src="https://img.shields.io/github/stars/wiredjs/wired-elements.svg?label=&style=social"
|
||
alt="Repo Star" /></a> - Set of common UI elements with a hand-drawn,
|
||
sketchy look.</li>
|
||
</ul>
|
||
<h3 id="related-community-list-6">Related community list</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/mateusortiz/webcomponents-the-right-way">Web
|
||
Components the Right Way</a> - A curated list of awesome Web Components
|
||
resources.</li>
|
||
</ul>
|
||
<hr />
|
||
<h2 id="a11y-components">A11y Components</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/darekkay/a11y-contrast">a11y-contrast</a> — A
|
||
CLI utility to calculate/verify accessible magic numbers for a color
|
||
palette.</li>
|
||
<li><a
|
||
href="https://github.com/KittyGiraudel/a11y-dialog">a11y-dialog</a> - A
|
||
very lightweight and flexible accessible modal dialog script.</li>
|
||
<li><a
|
||
href="https://github.com/KittyGiraudel/react-a11y-dialog">react-a11y-dialog</a>
|
||
- Port of a11y-dialog to React.</li>
|
||
<li><a
|
||
href="https://github.com/morkro/vue-a11y-dialog">vue-a11y-dialog</a> -
|
||
Port of a11y-dialog to Vue.</li>
|
||
<li><a
|
||
href="https://github.com/AgnosticUI/svelte-a11y-dialog">svelte-a11y-dialog</a>
|
||
- Port of a11y-dialog to Svelte.</li>
|
||
<li><a href="https://github.com/agnosticui/a11y-tabs">a11y-tabs</a> - A
|
||
lightweight (<1Kb) JavaScript package to facilitate a11y-compliant
|
||
tabbed interfaces.</li>
|
||
<li><a href="https://aberkow.github.io/a11y-menu/">a11y-menu</a> — This
|
||
project aims to create a re-useable and accessible main navigation
|
||
module.</li>
|
||
<li><a href="https://github.com/scottaohara/accessible_components">Scott
|
||
Ohara’s a11y components</a> — Listing of accessible components &
|
||
patterns.</li>
|
||
<li><a href="https://pattern-library.dequelabs.com/">Deque Cauldron</a>
|
||
— A fullyaccessibleHTML, CSS, and Javascript front-end framework for
|
||
creating web and mobile applications.</li>
|
||
</ul>
|
||
<hr />
|
||
<h2 id="some-community-conversations">Some Community conversations</h2>
|
||
<ol type="1">
|
||
<li><a
|
||
href="https://www.reddit.com/r/reactjs/comments/9fhxj0/what_are_some_of_the_ui_libraries_you_used_for/">What
|
||
are some of the ui libraries you used?</a></li>
|
||
<li><a
|
||
href="https://www.reddit.com/r/reactjs/comments/a6qhbr/checked_21_react_ui_kits_briefly_im_done/">Checked
|
||
21 react ui kits briefly, I’m done!</a></li>
|
||
<li><a
|
||
href="https://dev.to/rhymes/how-many-ui-libraries-is-enough-17om">How
|
||
many ui libraries is enough?</a></li>
|
||
</ol>
|
||
<hr />
|
||
<h2 id="styleguides">Styleguides</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/anubhavsrivastava/awesome-ux-design-styles">Awesome
|
||
UX Designs</a></li>
|
||
<li><a href="http://styleguides.io/">styleguides.io</a> - Website Style
|
||
Guide Resources</li>
|
||
<li><a href="https://designsystemsrepo.com/design-systems/">Design
|
||
Systems Gallery</a> - A comprehensive and curated list of design
|
||
systems, style guides and pattern libraries that you can use for
|
||
inspiration.</li>
|
||
</ul>
|
||
<hr />
|
||
<h2 id="contribution">Contribution</h2>
|
||
<p>Suggestions and PRs are welcome!</p>
|
||
<p>Please read the <a href="CONTRIBUTING.md">contribution guidelines</a>
|
||
to get started.</p>
|
||
<h2 id="license">License</h2>
|
||
<p>Creative Commons Zero v1.0 Universal <a
|
||
href="https://creativecommons.org/publicdomain/zero/1.0/"><img
|
||
src="http://mirrors.creativecommons.org/presskit/buttons/88x31/svg/cc-zero.svg"
|
||
alt="CC0" /></a></p>
|
||
<p><a
|
||
href="https://github.com/anubhavsrivastava/awesome-ui-component-library">uicomponentlibrary.md
|
||
Github</a></p>
|