ui-libraries
# UI Libraries A collection of UI Frameworks and their platform implementations. [Inspired by this HN thread.](https://news.ycombinator.com/item?id=18234867) ## Contributing If you would like to add libraries, please feel free to create a `PR` with the edits. Please *only open source, no paid libraries*. Also please try to keep the markdown consistent. # Libraries by UI Kit **Table of Contents** 1. [Material](#material) 2. [Bootstrap](#bootstrap) 3. [Fabric](#fabric) 4. [Lightning Design System](#lightning) 5. [Elastic](#elastic) 6. [Foundation](#foundation) 7. [Semantic](#semantic) 8. [Tailwind](#tailwind) 9. [AntD](#antd) 10. [Miscellaneous](#miscellaneous) ## Material **Project Website:** https://material.io/ ### Sketch - [Material Theme Editor](https://material.io/tools/theme-editor/) - [sketch-material](https://github.com/websiddu/sketch-material) - [material-kit](https://github.com/creativetimofficial/material-kit/tree/sketch) ### Photoshop - [material-kit](https://github.com/creativetimofficial/material-kit/tree/photoshop) ### Figma - [Material Kit Figma](https://demos.creative-tim.com/material-kit-figma/presentation.html) ### HTML/CSS - [Material Design Lite](https://getmdl.io/index.html) ### Wordpress - [HESTIA](https://themeisle.com/themes/hestia/?ref=creativetim) ### Angular - [Angular Material](https://material.angular.io) ### React - [material-ui](https://material-ui.com/) - [react-toolbox](https://github.com/react-toolbox/react-toolbox) - [material-kit](https://www.creative-tim.com/product/material-kit-react) ### React-Native - [react-native-material-kit](https://github.com/xinthink/react-native-material-kit) - [react-native-material-ui](https://github.com/xotahal/react-native-material-ui) - [react-native-paper](https://github.com/callstack/react-native-paper) - [material-kit](https://www.creative-tim.com/product/material-kit-react-native) ### Vue - [vuetify](https://github.com/vuetifyjs/vuetify) - [vue-material](https://github.com/vuematerial/vue-material) - [material-kit](https://www.creative-tim.com/product/vue-material-kit) ## Bootstrap **Project Website:** https://getbootstrap.com/ ### HTML/CSS - [Bootstrap](https://getbootstrap.com/) ### Angular - [NG Bootstrap](https://ng-bootstrap.github.io/) - [UI Bootstrap](https://angular-ui.github.io/bootstrap/) ### React - [react-bootstrap](https://react-bootstrap.github.io/) - [reactstrap](https://reactstrap.github.io/) - [Create-React-App Bootstrap Docs](https://facebook.github.io/create-react-app/docs/adding-bootstrap) ### Vue - [bootstrap-vue](https://github.com/bootstrap-vue/bootstrap-vue) ## Fabric **Project Website:** https://developer.microsoft.com/en-us/fabric ### Sketch - [Fabric Design Sketch](https://docs.microsoft.com/en-us/office/dev/add-ins/design/design-toolkits) ### Adobe XD - [Fabric Design Adobe XD](https://docs.microsoft.com/en-us/office/dev/add-ins/design/design-toolkits) ### HTML/CSS - [Fabric Core](https://developer.microsoft.com/en-us/fabric#/get-started#core) - [Clippy JS](https://www.smore.com/clippy-js) ### React - [Fabric React](https://developer.microsoft.com/en-us/fabric#/components) ## Lightning **Project Website:** https://www.lightningdesignsystem.com/ ### Sketch - [Scroll down on this page](https://www.lightningdesignsystem.com/downloads/) ### HTML/CSS - [HTML/CSS](https://www.lightningdesignsystem.com/getting-started/) ### Angular - [NG-Lightning](https://ng-lightning.github.io/ng-lightning/#/) ### React - [LDS for React](https://react.lightningdesignsystem.com/) ## Elastic **Project Website:** https://elastic.github.io/eui/#/ ### Sketch - [Download Link in Upper Right Corner](https://elastic.github.io/eui/#/) ### HTML/CSS - [React](https://github.com/elastic/eui/blob/master/wiki/consuming.md#using-eui-in-a-standalone-project) ## Foundation **Project Website:** https://foundation.zurb.com/ ### Angular - [Angular Foundation](https://foundation.zurb.com/apps/docs/#!/angular) ### React - [React Foundation](https://react.foundation/) ## Semantic **Project Website:** https://semantic-ui.com/ ### React - [semantic-ui-react](https://github.com/Semantic-Org/Semantic-UI-React) ### Angular - [semantic-ui-angular](https://github.com/Semantic-Org/Semantic-UI-Angular) ### Ember - [Semantic Install Instructions](https://semantic-ui.com/introduction/integrations.html#install-via-atmosphere) ### Meteor - [Semantic Install Instructions](https://semantic-ui.com/introduction/integrations.html#installing-via-cli) ## Tailwind - [Tailwind CSS](https://tailwindcss.com/) - [Vue Tailwind](https://www.vue-tailwind.com/) ## AntD ### React - [Ant Design](https://ant.design/) ### Vue - [Ant Design Vue](https://www.antdv.com/docs/vue/introduce/) ## Miscellaneous ### HTML/CSS - [Atlaskit](https://atlaskit.atlassian.com/) - [Clarity](https://clarity.design/) ### CSS - [Pure CSS](https://purecss.io/) - [Base CSS](http://basscss.com/) ### Angular - [Clarity](https://clarity.design/) - [Covalent](https://teradata.github.io/covalent) - [PrimeNG](https://www.primefaces.org/primeng) ### React - [Office UI Fabric](https://developer.microsoft.com/en-us/fabric) - [Atlaskit](https://atlaskit.atlassian.com/) - [Ring](https://jetbrains.github.io/ring-ui/master/index.html) - [Blueprint](https://blueprintjs.com/) - [Lucid UI](http://appnexus.github.io/lucid/?selectedKind=Lucid%20UI&selectedStory=Introduction&full=0&addons=0&stories=1&panelRight=0&addonPanel=lucid-docs-panel-props) - [Base](https://baseweb.design/) - [Evergreen](https://github.com/segmentio/evergreen) - [Fannypack](https://fannypack.style/) - [Reakit](https://reakit.io/) - [Dialog](https://dialogs.github.io/dialog-web-components/) ### Vue - [Element](https://element.eleme.io/#/en-US) - [AT UIKIT](https://at-ui.github.io/at-ui/#/en) - [iView](https://www.iviewui.com/)