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 (
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 (
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 (
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 (
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 (
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 (
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 (
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 (
Apr 16, 2019
Learn how to make a form in React using Typescript, Material UI, and Formik.
Multi Step Form With React & Material UI (
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 (
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.


@material-ui/core (
Aug 10, 2019
React components that implement Google's Material Design
  • Olivier Tassinari
  • Hai Nguyen
  • Matt Brookes
material-ui-layout (
Jul 26, 2019
Declarative layout for Material UI.
  • Pol Guixé
  • Oscar Chic
react-md (
Jul 19, 2019
A set of React components and sass files for implementing Google's Material Design.
  • Mikkel Laursen
material-kit (
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 (
Jul 02, 2018
Highly customizable material design components for React Native
  • Jiri Otahal
  • Jan Ziemba
react-toolbox (
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 (
Apr 07, 2018
A set of wrapper components to facilitate using Material UI with Redux Form
  • Erik Rasmussen
react-native-material-kit (
Nov 11, 2017
Bringing Material Design to React Native
  • Yingxin Wu