Using Material Design With React

Material is an adaptable system of guidelines, components, and tools that support the best practices of user interface design. More info

Articles & Tutorials

Lessons In Multi-Step Form With React & Material UI (dev.to)
May 10, 2020
When it comes to a multi-step form with React. I had trouble searching for related materials. On how to do it as I was implementing a survey form for one of my projects.
  • Max Ong Zong Bao
Using Next.js and Material UI Together (dunglas.fr)
May 26, 2019
Both libraries are impressive, but there are some tricks to know to make them playing well together.
  • Kévin Dunglas
How to autogenerate forms in React and Material-UI with MSON (medium.freecodecamp.org)
Oct 22, 2018
Implementing great forms can be a real time-waster. With just a few lines of JSON, you can use MSON to generate forms that perform real-time validation and have a consistent layout. And, MSON comes with a bunch of cool stuff like date pickers, masked fields and field collections.
  • Geoff Cox
How to use ReactJS with Webpack 4, Babel 7, and Material Design (medium.freecodecamp.org)
Oct 10, 2018
For the past year and some, I have been working with React at Creative Tim. I have been using create-react-app for developing some nice…
  • Nazare Emanuel Ioan
The definitive guide to React Material (blog.logrocket.com)
Jun 06, 2018
Material Design is a design language that was first introduced by Google in 2014. It’s a visual language that makes use of grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows.
  • Yomi Eluwande

Video Guides & Talks

React Material-UI Themes: Customize Material Components for your Project (youtube.com)
Jun 24, 2020
In this video, we will have a look at how you can customize react material-ui to align with your company identity (design system) and products.
  • Bruno Antunes
Full Stack React & Firebase Tutorial - Build a social media app (youtube.com)
Jun 24, 2019
In this full tutorial course, you will learn how to create a full stack, fully-featured social media application using React, Firebase, Redux, Express, and Material-UI.
  • Beau Carnes
React Typescript Material UI Form (youtube.com)
Apr 16, 2019
Learn how to make a form in React using Typescript, Material UI, and Formik.
Multi Step Form With React & Material UI (youtube.com)
Nov 05, 2018
In this project we will build a React multi step form with multiple componenets including user & personal details, confirmation and success. We will use Material UI as well.
React & Material UI Project Using The PixaBay API (youtube.com)
Apr 22, 2018
In this project we will use React along with Material UI to build an image finder application that uses the PixaBay API to fetch images based on a query string. We will also implement a Dialog box from Material UI to view the large image.

Libraries

@material-ui/core (material-ui.com)44577
v4.3.2
Aug 10, 2019
React components that implement Google's Material Design
  • Olivier Tassinari
  • Hai Nguyen
  • Matt Brookes
material-ui-layout (material-ui-layout.origen.studio)37
v4.0.0-rc.9
Jul 26, 2019
Declarative layout for Material UI.
  • Pol Guixé
  • Oscar Chic
react-md (react-md.mlaursen.com)1961
v1.12.2
Jul 19, 2019
A set of React components and sass files for implementing Google's Material Design.
  • Mikkel Laursen
material-kit (demos.creative-tim.com)4957
v2.0.4
Jul 02, 2018
Free and Open Source UI Kit for Bootstrap 4, React, Vue.js, React Native and Sketch based on Google's Material Design.
  • Alex Paduraru
react-native-material-ui (github.com)2671
v1.30.1
Jul 02, 2018
Highly customizable material design components for React Native
  • Jiri Otahal
  • Jan Ziemba
react-toolbox (react-toolbox.io)8344
v2.0.0-beta.13
Jun 02, 2018
A set of React components implementing Google's Material Design specification with the power of CSS Modules
  • Javi Velasco
redux-form-material-ui (github.com)771
v4.3.4
Apr 07, 2018
A set of wrapper components to facilitate using Material UI with Redux Form
  • Erik Rasmussen
react-native-material-kit (xinthink.github.io)4263
v0.5.1
Nov 11, 2017
Bringing Material Design to React Native
  • Yingxin Wu