Material UI: Intro, Installation and Component Tutorials

Material UI is "the world's most popular React UI Framework".

To install, we'll be following the installation docs.

You'll see a few different installation options: to install with Emotion or styled-components as your styling engine. We'll stick with the standard installation with Emotion for now.

Be sure to double-check with the docs, but the installation command to run on your terminal should be:

yarn add @mui/material @emotion/react @emotion/styled @mui/icons-material

We've added the icons package at the end as we'll be using it frequently, but it isn't required.

Check the documentation if you'd like to make sure the Roboto font renders correctly (the default font intended to be used with Material UI). And if you want to use Material Icons, there are commands to install those as well.

Using Material UI - Rendering a Button

Using the components is simple. Just import the component from the library and render it like any other React component. We will render the default example provided on their Usage page:

import React from 'react';
import Button from '@mui/material/Button';

export default function MyApp() {
  return (
    <div>
      <Button variant="contained">Hello World</Button>
    </div>
  );
}

The nice thing about the components is that they all contain their own styles, so there isn't a global CSS file that you have to worry about. Shortly we'll discuss a theme which controls properties like spacing and the primary color palette.

How to Use Material UI Documentation

On the Material UI site, click the upper left menu and you'll see a sidebar. We'll first talk about the two sections: Components and Component API. The main difference between these two sections is that the Components section contains examples/demos and explanations for each component while the Component API contains a complete list of all props and CSS rules/classes for each component. Each component appears in both sections, creating a nice separation between exploration and checking exact property names.

Material UI Component Examples

The Components section is where you're going to spend most of your time when researching how to use Material UI. The most important part about each component is that there are usually working examples on the page that you can try out.

For each example, you can see the full source code simply by clicking on the code icon: <> for each example. What you normally see on each component is a snippet of how to use the component, but more than likely you're going to want to see how that component was being used, the CSS that was applied, and the full list of imports. So that's why you will always want to click "show the full source" icon. You can even click "Edit in CodeSandbox" to instantly see the example within a live environment.

Best of all, these examples actually work, so you can copy the full code into your project, and then import the example into your project with minimal effort. The examples are usually creative and incorporate multiple elements from Material UI.

Building your own Material UI Template

Our Material UI Templates path shows you how to build and customize your own Material UI Dashboard. Check it out if you want to skip this tutorial and just start building an app.