Material UI Setup in React

In this article we will learn about Material UI Setup in React.

Table of Contents

What is Material UI ?

ReactJS – Material UI, React community provides a huge collection of advanced UI component framework. Material UI is one of the popular React UI frameworks.

Material UI is a comprehensive library of components that features our implementation of Google’s Material Design system.

Installation Material UI in React

Install MUI, the world’s most popular React UI framework.

Material UI Setup in React :

npm

To install and save in your package.json dependencies, run:

// with npm
npm install @mui/material @emotion/react @emotion/styled

// with yarn
yarn add @mui/material @emotion/react @emotion/styled

Please note that react >= 17.0.0 and react-dom >= 17.0.0 are peer dependencies.

Example :

The following code snippet demonstrates a basic Material UI app that features a <Button> component:


import * as React from 'react';
import ReactDOM from 'react-dom';
import Button from '@mui/material/Button';

function App() {
  return (
    <button variant="contained" color="primary">
      Hello World
    </button>
  );
}

Output :

In the interactive demo below, try changing the code and see how it affects the output. (Hint: change variant to "outlined" and color to "secondary".

👉 Congratulations! You have successfully Install Material UI in your App. 😎

I hope you like this article. 🙂