5 Material UI Components You Should Use In Your Next React Project

Material UI is a component library for React teeming with powerful components that you should be using in your projects. If you’re just looking to create a good looking app, Material UI can provide you with solid pre-styled components that will get the job done. If you are looking to customize those components Material UI gives you the tools to do that as well.

You had me at the logo.

To get started with Material UI, simply:

npm install @material-ui/core 

And make sure to throw Roboto in your index.html:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />

Now you can begin importing components like so:

Here is an example of importing the Grid and Paper components as well as the makeStyles function from Material UI

Let’s take a look at 5 components that are guaranteed to make your project look better.

1. Grid

The Grid component gives you the ability to create the layout for your a section of the DOM. If you’ve ever used Bootstrap before this will be familiar to you. This is the first component I consider when laying out my MUI apps.

Key things to know about the Grid component:

• There are 2 types of Grid components, ‘container’ and ‘item’. The container is the outer most component and any children of this component should be set to ‘item’.
• The Grid system uses a 12 partitions. Items must add up to 12 when deciding how wide they are.

Grid React component - Material-UI

In this case, the xs refers to the screen size (see the docs) each item adding up to 12 will take up 1 row. So in this case there are 3 rows.

2. Paper

The Paper component is one of my favorites, as it gives a section some lift and a drop shadow to produce a paper-like look. This is perfect for any cards you are making.

Key things to know about the Paper component:

• You can control the drop shadow with the ‘elevation’ property.
• You can give the paper an outline by using variant="outlined" although I prefer without the outline.

https://material-ui.com/components/paper/

Here are 3 Paper components with varying elevations.

3. Material Icons

One of the best ways to make your app look professional is to have recognizable and intuitive icons. Material UI provides a set of icons that are easily imported and implemented. No more digging around the internet or trying to figure out how Font Awesome icons work. Material UI has them built in for free.

Key things to know about the Material Icons components:

• They must be separately installed using npm install @material-ui/icons
• There are 5 variations of each icon: ‘filled’, ‘outlined’, ‘rounded’, ‘two tone’, ‘sharp’.

https://material-ui.com/components/material-icons/

Here are just a few examples of the great icons in Material UI

4. Snackbar

The Snackbar is one of the most fun and useful ways to tell your user when something has happened on your app. For example if you want to tell the user their profile picture has been uploaded. Or if you want to let the user know their user name has been taken, the Snackbar might be the right component for the job.

Key things to know about the Snackbar component:

• In order to change whether the Snackbar is showing or not you must have the state change.
• While other components are a bit easier to implement, this one takes some understanding about how it works to get it working the way you want it. But the end result is always satisfying!

https://material-ui.com/components/snackbars/

Here are some examples of the Snackbar component.

5. Tooltip

Don’t sleep on Tooltip. Although it might seem trivial, tooltips in your app help users get an idea of what exactly each of your icons is doing. If your icons are not immediately intuitive, users may not know what they mean unless they have a tooltip. I recommend reading Intuitive Design by Everett McKay for more information on how to make your app intuitive.

What makes Material UI’s tooltip component so great is that you can pretty much wrap it around any other component and it will do the job.

• Tooltips can be given a specific direction to pop up. There are 12 placement choices that can be specified with the placement property.
• If you really want to dive in, you can customize the look of the tooltip and make it your own.

https://material-ui.com/components/tooltips/

Makes a big difference!

These are just 5 of the amazing components from the Material UI library. We haven’t even got into how to customize the components or the experimental “Lab” additions to the library.

For more information on Material UI you can of course visit the amazing documentation here:

Material-UI: A popular React UI framework

If you would like to learn about more React libraries you can read my article:

React Component Libraries, How You Can Create Your Own AND 19 Libraries to Get You Started

Thanks for reading. For more articles like this please follow me on Medium and add me on Twitter @thedrewprint and LinkedIn — Andrew Richards