Courses & Tutorials
Awesome Material UI – Massive Collection of Resources
Contents
Resources
Official projects and resources of Material-UI Design.
- Material-UI – React components for faster and easier web development. Build your own design system, or start with Material Design.
Articles
- Getting started with Material-UI – How to setup and use Material-UI in your React web application.
- How to autogenerate forms in React and Material-UI with MSON – A guide to auto generate forms using JSON in Material-UI.
- Let’s Create a COVID-19 Tracker using React.js – A guide to develop covid 19 tracker application using Material-UI
- Serverless Material UI contact form – A guide to develop Material-UI contact form
- Embed Medium as a blog on your React Website — Part 2 – A guide to embed medium as a blog on your react website using Material-UI
Tools
These are tools and utilities to help build apps using Material-UI Design.
- Material-UI Snippets – VSCode extension providing snippets.
- Material-UI Codemorphs – VSCode extension providing codemods.
Theming
Here are utilities that can help you customize your theme and ability to change it in browser.
- Create Material-UI Theme – Online tool for creating Material-UI themes via Material Design Color Tool.
- Material-UI Theme Generator – Material-UI theme/palette generator.
- Material-UI Theme Editor – A tool to generate themes for your Material-UI applications by just selecting the colors and having a live preview.
Related Projects
Material-UI Design family of projects.
- Material Theme Editor – Create and customize your Material theme.
- Components Extra – 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.
- React Admin – A frontend Framework for building admin applications running in the browser, on top of REST/GraphQL APIs, using ES6, React and Material Design.
- React Github Repo Cards – 8 best GitHub repositories of Sabesan Sathananthan.
- Material-UI Medium Blog – Sabesan Sathananthan’s last 10 Medium blogs.
Components
A list of UI components built with Material-UI Design.
- Material-UI Pickers – Date and time pickers built for @material-ui/core.
- Material-UI Chip Input – Material-UI chip input inspired by Angular Material chip input.
- Material-UI Password field – A password field using Material-UI.
- Fullscreen Dialog – A fullscreen dialog for Material-UI.
- Material-UI Upload – Upload controls made in Material-UI using FileAPI.
- Super Select Field – Multi-selection autocomplete dropdown component for Material-UI.
- Material JSON Schema Form – Material-UI form generated from json.
- Notistack – Easy snackbars for Material-UI (so you don’t have to deal with open/close state of them).
- Material-UI Dropzone – Material-UI component built on top of react-dropzone.
- Formik-Material-UI – Bindings for using Material-UI with formik.
- Redux-Form-Material-UI – Wrapper components to facilitate using Material-UI with Redux Form.
- Final-Form-Material-UI – Wrapper components to facilitate using Material-UI with Final Form.
- Material-UI Auto Rotating Carousel – Material style carousel.
- Material-UI Image – Material style image with loading animation.
- Material-UI Flat Pagination – A flat design pagination component for Material-UI.
- Dx-react-scheduler-Material-UI – A scheduler/calendar component for Material-UI.
- Dx-react-chart-Material-UI – Charts for Material-UI that visualizes data using a variety of series types, including bar, line, area, scatter, pie, and more.
- Material-UI Medium Blog – Extended Material-UI Card component to show the Medium blogs.
- React Github Repo Cards – Extended Material-UI Card component to show the GitHub repositories.
- React molecule-components – React molecule-components based on Material-UI.
- Material-UI NestedMenuItem – Drop-in replacement for MUI’s MenuItem with infinitely nested menus, and open on hover.
Applications
A list of mature apps built with Material-UI Design.
- bethesda.net – The official site for Bethesda, publisher of Fallout, DOOM, Dishonored, Skyrim, Wolfenstein, The Elder Scrolls, more.
- NEO Tracker – NEO blockchain explorer and wallet.
- TagSpaces – An offline, open source, file manager.
- Builder Book – An open source web app to write and host documentation or sell books.
- NPM registry browser – An open source web app that lets you search the npm registry and browse packages details.
- Serverless Permission Policy Generator – An Online Application to generate AWS IAM permissions required for deploying a Serverless stack.
Boilerplates
A list of starter projects and boilerplates built with Material-UI Design.
- Create React App example (mui-org/material-ui) – Create React App example from official Material-UI repo.
- create-react-app-material-ui – Simple Create React App with Material-UI form submit example.
- react-materialui-boilerplate – A starter kit for react and Material-UI.
- gatsby-starter-material-ui – A starter template for Gatsby using Material-UI.
