Skip to content
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.

People come to Material-UI from different backgrounds and with different learning styles. Whether you prefer a more theoretical or a 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

We host some example projects providing the infrastructure needed to develop and deploy websites in React.

Page layout examples

We have a selection of basic page layouts to 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. We maintain a list of commonly recommended resources, some of which are free.

Free

  • 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

  • React Material-UI Cookbook: Build modern day application by implementing Material Design principles in React applications 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.