240 lines
11 KiB
HTML
240 lines
11 KiB
HTML
<p><a href="https://material-ui.com/"></a></p>
|
||
<h1 align="center">
|
||
Awesome Material-UI
|
||
</h1>
|
||
<p><a href="https://github.com/sindresorhus/awesome"></a></p>
|
||
<p><a href="https://material-ui.com/">Material-UI</a> is a React
|
||
components library for faster and easier web development. It follows <a
|
||
href="https://material.io/design/introduction/">Material Design</a> from
|
||
Google.</p>
|
||
<h2 id="contents">Contents</h2>
|
||
<ul>
|
||
<li><a href="#resources">Resources</a></li>
|
||
<li><a href="#articles">Articles</a></li>
|
||
<li><a href="#tools">Tools</a></li>
|
||
<li><a href="#theming">Theming</a></li>
|
||
<li><a href="#related-projects">Related Projects</a></li>
|
||
<li><a href="#components">Components</a></li>
|
||
<li><a href="#applications">Applications</a></li>
|
||
<li><a href="#boilerplates">Boilerplates</a></li>
|
||
</ul>
|
||
<h2 id="resources">Resources</h2>
|
||
<p>Official projects and resources of Material-UI Design.</p>
|
||
<ul>
|
||
<li><a href="https://material-ui.com/">Material-UI</a> - React
|
||
components for faster and easier web development. Build your own design
|
||
system, or start with Material Design.</li>
|
||
</ul>
|
||
<h2 id="articles">Articles</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://medium.com/codingthesmartway-com-blog/getting-started-with-material-ui-for-react-material-design-for-react-364b2688b555">Getting
|
||
started with Material-UI</a> - How to setup and use Material-UI in your
|
||
React web application.</li>
|
||
<li><a
|
||
href="https://medium.com/free-code-camp/how-to-autogenerate-forms-in-react-and-material-ui-with-mson-5771b1b7e739">How
|
||
to autogenerate forms in React and Material-UI with MSON</a> - A guide
|
||
to auto generate forms using JSON in Material-UI.</li>
|
||
<li><a
|
||
href="https://towardsdatascience.com/lets-create-a-covid-19-tracker-using-react-js-5a3a0265a633">Let’s
|
||
Create a COVID-19 Tracker using React.js</a> - A guide to develop covid
|
||
19 tracker application using Material-UI</li>
|
||
<li><a
|
||
href="https://medium.com/design-bootcamp/serverless-material-ui-contact-form-55296e107609">Serverless
|
||
Material UI contact form</a> - A guide to develop Material-UI contact
|
||
form</li>
|
||
<li><a
|
||
href="https://medium.com/datadriveninvestor/embed-medium-as-a-blog-on-your-react-website-part-2-187db2b60a59">Embed
|
||
Medium as a blog on your React Website — Part 2</a> - A guide to embed
|
||
medium as a blog on your react website using Material-UI</li>
|
||
</ul>
|
||
<h2 id="tools">Tools</h2>
|
||
<p>These are tools and utilities to help build apps using Material-UI
|
||
Design.</p>
|
||
<ul>
|
||
<li><a
|
||
href="https://marketplace.visualstudio.com/items?itemName=vscodeshift.material-ui-snippets">Material-UI
|
||
Snippets</a> - VSCode extension providing snippets.</li>
|
||
<li><a
|
||
href="https://marketplace.visualstudio.com/items?itemName=vscodeshift.material-ui-codemorphs">Material-UI
|
||
Codemorphs</a> - VSCode extension providing codemods.</li>
|
||
</ul>
|
||
<h2 id="theming">Theming</h2>
|
||
<p>Here are utilities that can help you customize your theme and ability
|
||
to change it in browser.</p>
|
||
<ul>
|
||
<li><a href="https://github.com/react-theming/create-mui-theme">Create
|
||
Material-UI Theme</a> - Online tool for creating Material-UI themes via
|
||
Material Design Color Tool.</li>
|
||
<li><a
|
||
href="https://cimdalli.github.io/mui-theme-generator/">Material-UI Theme
|
||
Generator</a> - Material-UI theme/palette generator.</li>
|
||
<li><a
|
||
href="https://in-your-saas.github.io/material-ui-theme-editor/">Material-UI
|
||
Theme Editor</a> - A tool to generate themes for your Material-UI
|
||
applications by just selecting the colors and having a live
|
||
preview.</li>
|
||
</ul>
|
||
<h2 id="related-projects">Related Projects</h2>
|
||
<p>Material-UI Design family of projects.</p>
|
||
<ul>
|
||
<li><a
|
||
href="https://in-your-saas.github.io/material-ui-theme-editor/">material-ui-theme-editor</a>
|
||
- A tool to generate themes for your Material UI applications that
|
||
features live previewing.</li>
|
||
<li><a href="https://m2.material.io/inline-tools/color/">Material
|
||
palette generator</a> - The official Material Design palette generator
|
||
can be used to generate a palette for any color you choose.</li>
|
||
<li><a
|
||
href="https://github.com/alexandre-lelain/components-extra">Components
|
||
Extra</a> - Provides a set of “molecule” components built on top of
|
||
Material-UI such as a Footer, a CookiesBanner, a BackToTop button and
|
||
other complex elements highly customizable to help developers build the
|
||
macro parts of their UI very quickly. Those components are often
|
||
duplicated across sites - this library solves this exact problem.</li>
|
||
<li><a href="https://marmelab.com/react-admin/">React Admin</a> - A
|
||
frontend Framework for building admin applications running in the
|
||
browser, on top of REST/GraphQL APIs, using ES6, React and Material
|
||
Design.</li>
|
||
<li><a
|
||
href="https://marketplace.visualstudio.com/items?itemName=vscodeshift.material-ui-snippets">Material
|
||
UI Snippets</a> - VSCode extension providing snippets.</li>
|
||
<li><a
|
||
href="https://marketplace.visualstudio.com/items?itemName=vscodeshift.material-ui-codemorphs">Material
|
||
UI Codemorphs</a> - VSCode extension providing codemods.</li>
|
||
<li><a
|
||
href="https://github.com/jens-ox/eslint-plugin-material-ui-unused-classes">Eslint:
|
||
detect unused classes</a> - ESLint plugin to detect unused styling
|
||
classes with <code>@mui/styles</code>.</li>
|
||
</ul>
|
||
<h2 id="components">Components</h2>
|
||
<p>A list of UI components built with Material-UI Design.</p>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/TeamWertarbyte/material-ui-chip-input">Material-UI
|
||
Chip Input</a> - Material-UI chip input inspired by Angular Material
|
||
chip input.</li>
|
||
<li><a
|
||
href="https://github.com/TeamWertarbyte/material-ui-password-field">Material-UI
|
||
Password field</a> - A password field using Material-UI.</li>
|
||
<li><a
|
||
href="https://github.com/TeamWertarbyte/material-ui-fullscreen-dialog">Fullscreen
|
||
Dialog</a> - A fullscreen dialog for Material-UI.</li>
|
||
<li><a href="https://github.com/corpix/material-ui-upload">Material-UI
|
||
Upload</a> - Upload controls made in Material-UI using FileAPI.</li>
|
||
<li><a
|
||
href="https://github.com/Sharlaan/material-ui-superselectfield">Super
|
||
Select Field</a> - Multi-selection autocomplete dropdown component for
|
||
Material-UI.</li>
|
||
<li><a
|
||
href="https://github.com/nadunindunil/material-jsonschema-form">Material
|
||
JSON Schema Form</a> - Material-UI form generated from json.</li>
|
||
<li><a href="https://github.com/iamhosseindhv/notistack">Notistack</a> -
|
||
Easy snackbars for Material-UI (so you don’t have to deal with
|
||
open/close state of them).</li>
|
||
<li><a
|
||
href="https://github.com/Yuvaleros/material-ui-dropzone">Material-UI
|
||
Dropzone</a> - Material-UI component built on top of
|
||
react-dropzone.</li>
|
||
<li><a
|
||
href="https://github.com/stackworx/formik-material-ui">Formik-Material-UI</a>
|
||
- Bindings for using Material-UI with formik.</li>
|
||
<li><a
|
||
href="https://github.com/erikras/redux-form-material-ui">Redux-Form-Material-UI</a>
|
||
- Wrapper components to facilitate using Material-UI with Redux
|
||
Form.</li>
|
||
<li><a
|
||
href="https://github.com/Deadly0/final-form-material-ui">Final-Form-Material-UI</a>
|
||
- Wrapper components to facilitate using Material-UI with Final
|
||
Form.</li>
|
||
<li><a
|
||
href="https://mui.wertarbyte.com/#material-auto-rotating-carousel">Material-UI
|
||
Auto Rotating Carousel</a> - Material style carousel.</li>
|
||
<li><a href="https://mui.wertarbyte.com/#material-ui-image">Material-UI
|
||
Image</a> - Material style image with loading animation.</li>
|
||
<li><a
|
||
href="https://github.com/szmslab/material-ui-flat-pagination">Material-UI
|
||
Flat Pagination</a> - A flat design pagination component for
|
||
Material-UI.</li>
|
||
<li><a
|
||
href="https://devexpress.github.io/devextreme-reactive/react/scheduler/">Dx-react-scheduler-Material-UI</a>
|
||
- A scheduler/calendar component for Material-UI.</li>
|
||
<li><a
|
||
href="https://devexpress.github.io/devextreme-reactive/react/chart/">Dx-react-chart-Material-UI</a>
|
||
- Charts for Material-UI that visualizes data using a variety of series
|
||
types, including bar, line, area, scatter, pie, and more.</li>
|
||
<li><a
|
||
href="https://github.com/sabesansathananthan/material-ui-medium-blog">Material-UI
|
||
Medium Blog</a> - Extended Material-UI Card component to show the Medium
|
||
blogs.</li>
|
||
<li><a
|
||
href="https://github.com/sabesansathananthan/react-github-repo-cards">React
|
||
Github Repo Cards</a> - Extended Material-UI Card component to show the
|
||
GitHub repositories.</li>
|
||
<li><a href="https://github.com/alexandre-lelain/components-extra">React
|
||
molecule-components</a> - React molecule-components based on
|
||
Material-UI.</li>
|
||
<li><a
|
||
href="https://github.com/azmenak/material-ui-nested-menu-item">Material-UI
|
||
NestedMenuItem</a> - Drop-in replacement for MUI’s MenuItem with
|
||
infinitely nested menus, and open on hover.</li>
|
||
<li><a
|
||
href="https://github.com/innFactory/react-planet">React-planet</a> -
|
||
Create circular menus which looks like planets.</li>
|
||
<li><a href="https://github.com/typesnippet/mui-phone-input">MUI Phone
|
||
Input</a> - Advanced, highly customizable phone input component for
|
||
Material UI.</li>
|
||
<li><a
|
||
href="https://github.com/siriwatknp/mui-treasury">mui-treasury</a> - A
|
||
collection of ready-to-use components based on Material-UI.</li>
|
||
</ul>
|
||
<h2 id="applications">Applications</h2>
|
||
<p>A list of mature apps built with Material-UI Design.</p>
|
||
<ul>
|
||
<li><a href="https://bethesda.net/">Bethesda.net</a> - The official site
|
||
for Bethesda, publisher of Fallout, DOOM, Dishonored, Skyrim,
|
||
Wolfenstein, The Elder Scrolls, more.</li>
|
||
<li><a href="https://www.tagspaces.org/">TagSpaces</a> - An offline,
|
||
open source, file manager.</li>
|
||
<li><a href="https://builderbook.org/">Builder Book</a> - Books that
|
||
teach you how to build full stack, production-ready web apps.</li>
|
||
<li><a href="https://topheman.github.io/npm-registry-browser/">NPM
|
||
registry browser</a> - An open source web app that lets you search the
|
||
npm registry and browse packages details.</li>
|
||
<li><a
|
||
href="https://github.com/Open-SL/serverless-permission-generator">Serverless
|
||
Permission Policy Generator</a> - An Online Application to generate AWS
|
||
IAM permissions required for deploying a Serverless stack.</li>
|
||
</ul>
|
||
<h2 id="boilerplates">Boilerplates</h2>
|
||
<p>A list of starter projects and boilerplates built with Material-UI
|
||
Design.</p>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/mui-org/material-ui/tree/master/examples/create-react-app">Create
|
||
React App example (mui-org/material-ui)</a> - Create React App example
|
||
from official Material-UI repo.</li>
|
||
<li><a
|
||
href="https://github.com/katopz/create-react-app-material-ui">Create-react-app-material-ui</a>
|
||
- Simple Create React App with Material-UI form submit example.</li>
|
||
<li><a
|
||
href="https://github.com/syedabuthahirm/react-materialui-boilerplate">React-materialui-boilerplate</a>
|
||
- A starter kit for react and Material-UI.</li>
|
||
<li><a
|
||
href="https://github.com/nareshbhatia/gatsby-starter-material-ui">Gatsby-starter-material-ui</a>
|
||
- A starter template for Gatsby using Material-UI.</li>
|
||
<li><a href="https://github.com/async-labs/saas">Saas</a> - Boilerplate
|
||
for building your own SaaS product; built with TypeScript, React,
|
||
Express, Material-UI.</li>
|
||
<li><a
|
||
href="https://github.com/innFactory/create-react-app-material-typescript-redux">Create-react-app-material-typescript-redux</a>
|
||
- A ready to use boilerplate for starting big react projects.</li>
|
||
</ul>
|
||
<h2 id="contributing">Contributing</h2>
|
||
<p>Your contributions are always welcome! <a
|
||
href="https://github.com/nadunindunil/awesome-material-ui/blob/master/contributing.md">Click
|
||
Here to read the guidelines</a>.</p>
|
||
<p><a
|
||
href="https://github.com/nadunindunil/awesome-material-ui">materialui.md
|
||
Github</a></p>
|