Skip to content

🎉 Material UI v5 is out now! Check out the announcement blog post →

Edit this page

Learn Material-UI

New to Material-UI? It's easy to learn if you know where to start! This guide will help you to get started quickly.

Developers come to Material-UI from different backgrounds and with different learning styles. Whether you prefer a more theoretical or practical approach, we hope you’ll find this section helpful. Like any unfamiliar technology, Material-UI does have a learning curve. With practice and some patience, you will soon get the hang of it.

First Example

The usage page contains a small Material-UI example with a live editor. Even if you don’t know anything about Material-UI yet, try changing the code and see how it affects the result.

Example Projects

There are some example projects available, providing the infrastructure needed to develop and deploy websites in React.

Templates

This selection of basic templates will help you get started building your app.

Recommended resources

When first learning Material-UI, you might find third-party blog posts, books and video courses more helpful than the official documentation. Here are some recommended resources, some of which are free.

Free

  • Introduction to Material-UI: a series of videos covering all the important Material-UI components.
  • Customize Material-UI for your project: a look at how you can customize Material-UI to align with your company identity (design system) and products
  • Meet Material-UI — your new favorite user interface library: a blog post that guides you in building a Todo MVC while covering some important concepts of Material-UI.
  • Learn React & Material-UI: a series of videos covering all the important Material-UI components.
  • Getting Started With Material-UI For React: a blog post that guides you in building a simple card list.
  • Elegant UX in React with Material-UI: a blog post covering some important Material-UI concepts.

Paid

  • Implement high fidelity designs: Bridge the gap between Design & Development. Break down detailed designs and bring them to life with Material-UI and React.

  • Apply Google Material Design: This course teaches the fundamentals of Google Material Design and how to develop an end-to-end flight search and booking application using Material-UI and React.

  • Cookbook: Build modern-day applications by implementing Material Design principles in React, using Material-UI.

cookbook

  • Builder Book: Learn how to build a full-stack JavaScript web application from scratch, using a Modern JavaScript stack and Material-UI.