rhetenor/awesome-awesomeness
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
master
awesome-awesomeness/html/materialui.html
rhetenor 5916c5c074 update lists
2025-07-18 22:22:32 +02:00

240 lines
11 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<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>
Reference in New Issue View Git Blame Copy Permalink