React Material UI

Hello Fellow Developers I am going to create a brand new Blog series of material UI . In these series we are going to learn each and every thing about material UI from installing to being an expert.

Material UI is a fully loaded component library it brings you own design system and production-ready components.

In these article we will learn about how to install material UI in your current react app. Use the following command from the official site to install material UI.

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

or

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

This command will help you add latest version of Material UI in your app. Material UI is a vast library it comes with a lots of  components rich fonts and icons are also available.

Lets take an example of adding button using Material UI

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

export default function App() {
  return (
    <Stack spacing={2} direction="row">
      <Button variant="text">Text</Button>
      <Button variant="contained">Contained</Button>
      <Button variant="outlined">Outlined</Button>
    </Stack>
  );
}

This is how we can use a normal button from Material UI.

Yup its that Easy.