Material UI Design | React |
Tags: react, webdev, ui, design
Published: 2023-06-12 01:33:55

Hello Friends, This is [Madhuban Khatri](https://www.youtube.com/channel/UCxPWxR2Rzc2jdk_5JMvoQCQ) and Here I am sharing you [Material UI Design code](https://github.com/MadhubanKhatri/material_ui_design)

## Material UI
MUI offers a comprehensive suite of UI tools to help you ship new features faster. Start with Material UI, our fully-loaded component library, or bring your own design system to our production-ready components.

## Installation
```
npm install @mui/material @emotion/react @emotion/styled
```

## Source Code
### App.js
```javascript
import HomePage from './Pages/HomePage';
import AboutPage from './Pages/AboutPage';
import ContactPage from './Pages/ContactPage';
import Navbar from './Pages/Navbar';
import Login from './Pages/Login';
import SignupPage from './Pages/SignupPage';

import { useState } from 'react';
import { BrowserRouter, Route, Routes } from 'react-router-dom';

function App() {
  
  const typoStyle = {
    display: "inline",
    marginLeft: "20px",
    marginRight: "20px",
    fontSize: "25px",
  }

  const pageTextStyle = {
    // border: "2px solid white",
    // backgroundColor:"rgb(10 25 41)", 
    width:"960px", 
    height: "400px"
  }
  const linkStyle = {
    textDecoration: 'none',
    color: '#fff',
    fontWeight: 'bolder'
}
  return (
    <>
    <BrowserRouter>
      <Navbar typoStyle={typoStyle}/>
        <Routes>
          <Route path='/' element={<HomePage pageTextStyle={pageTextStyle} linkStyle={linkStyle}/>}/>
          <Route path='/about' element={<AboutPage pageTextStyle={pageTextStyle} linkStyle={linkStyle}/>}/>
          <Route path='/contact' element={<ContactPage pageTextStyle={pageTextStyle} linkStyle={linkStyle}/>}/>
          <Route path='/signup' element={<SignupPage pageTextStyle={pageTextStyle} linkStyle={linkStyle}/>}/>
          <Route path='/login' element={<Login pageTextStyle={pageTextStyle} linkStyle={linkStyle}/>}/>
        </Routes>
    </BrowserRouter>
    </>
  );
}

export default App;
```

### Navbar.js
```javascript
import{ Container, Typography, AppBar, Toolbar, IconButton, Switch } from '@mui/material/'
import { Link } from 'react-router-dom'
import { Menu } from '@mui/icons-material'
import { useState } from 'react'

export default function Navbar(props) {
    const [theme, setTheme] = useState('rgb(3, 45, 87)');
    
    const changeTheme = () => {
        if(theme==='#032d57'){
            setTheme('#001e3c')
        }else{
            setTheme('#032d57')
        }
        
    }   
    document.body.style.backgroundColor = theme;
    const linkStyle = {
        textDecoration: 'none',
        color: '#fff',
        fontWeight: 'bolder',
    }
    return (
        <>
        <Container style={{backgroundColor: "black", padding:"20px 0px"}}>
            <AppBar>
                <Toolbar sx={{backgroundColor:'rgb(0,30,60)'}}>
                    <IconButton
                        size='large'
                        edge='end'
                        color='inherit'
                        aria-label='menu'
                        sx={{mx:2}}
                    >
                        <Menu/>
                        </IconButton>   
                        <Typography variant='h6' sx={{mx:4, flexGrow:1}}>
                            <Link to="/" style={{textDecoration:'none', color:'white', fontWeight: 'bolder'}} >App Bar</Link>
                        </Typography>
                        <Typography variant='h6' sx={{mx:4}}>
                            <Link to="/" style={linkStyle}>Home</Link>
                        </Typography>
                        <Typography variant='h6' sx={{mx:4}}>
                            <Link to="/about" style={linkStyle}>About</Link>
                        </Typography>
                        <Typography variant='h6' sx={{mx:4}}>
                            <Link to="/contact" style={linkStyle}>Contact</Link>
                        </Typography>
                        <Switch onClick={changeTheme}/> Change Theme
                </Toolbar>
            </AppBar>

          

        </Container>
       
        </>
  )
}

```
### HomePage.js
![Home page image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b1nw1d9wqkzlwbow8es7.png)
```javascript
import{ Container, Typography, Box, Button, Grid } from '@mui/material/'
import { useNavigate } from 'react-router-dom'
import Footer from './Footer';

export default function HomePage(props) {
    const navigate = useNavigate();
  return (
    <>   
        <Container style={{position:"absolute",top:"160px"}}>
            <Box ml={35} color={'white'} style={props.pageTextStyle}>
                <Typography variant='h2' mt={15} ml={15} color={'white'}>
                    Design Material UI Website
                </Typography>

                <Grid container sx={{maxWidth:'450px'}} mx={35} my={3}>
                    <Grid item lg={6}>
                        <Button 
                            variant="contained" 
                            color='secondary' 
                            sx={{
                                width:"150px", 
                                fontSize:"15px", 
                                display:'inline-block',
                                '&:hover':{backgroundColor:'#4a148c'}}} 
                            onClick={()=>navigate("/signup")}>
                            Signup
                        </Button>
                    </Grid>
                    <Grid item lg={6}>
                        <Button 
                            variant="contained" 
                            color='secondary' 
                            sx={{
                                width:"150px", 
                                fontSize:"15px", 
                                display:'inline-block',
                                '&:hover':{backgroundColor:'#4a148c'}}} 
                                onClick={()=>navigate("/login")}>
                                Login
                        </Button>
                    </Grid>
                </Grid>
                
                
            </Box>
            <Box 
                component={'div'} 
                mx={10} 
                my={40} 
                sx={{
                    position:'absolute', 
                    top:'150px', 
                    textAlign:'center', 
                    width:'1280px',
                    borderBottom: '4px solid white',
                    borderTop: '4px solid white',
                    }}>
                <Typography variant='h1' color={'white'}>Projects</Typography>
            </Box>
            
            
            <Grid container m={20} spacing={5}>

                <Grid item lg={6}>
                    <img src='img1.png' alt='img1' style={{width:500, borderRadius:'5px'}}/>
                </Grid>

                <Grid item lg={6}>
                    <Typography variant='h3' my={3} color={'white'} sx={{fontSize: '35px'}}>
                        Video Sharing App | Django | Python
                    </Typography>

                    <Typography variant='span' color={'white'}>
                    YouTube is an American online video sharing and social media platform headquartered in San Bruno, California, United States. Accessible worldwide, it was launched on February 14, 2005, by Steve Chen, Chad Hurley, and Jawed Karim. It is owned by Google and is the second most visited website, after Google Search.
                    </Typography>
                </Grid>

                <Grid item lg={6}>
                    <Typography variant='h3' my={3} color={'white'} sx={{fontSize: '35px'}}>
                        File Sharing App | Django | Python
                    </Typography>

                    <Typography variant='span' color={'white'}>
                    File Share is an American online file sharing and social media platform headquartered in San Bruno, California, United States. Accessible worldwide, it was launched on February 14, 2005, by Steve Chen, Chad Hurley, and Jawed Karim. It is owned by Google and is the second most visited website, after Google Search.
                    </Typography>
                </Grid>
                <Grid item lg={6}>
                    <img src='img2.png' alt='img2' style={{width:500, borderRadius:'5px'}}/>
                </Grid>

                <Grid item lg={6}>
                    <img src='img3.png' alt='img3' style={{width:500, borderRadius:'5px'}}/>
                </Grid>

                <Grid item lg={6}>
                    <Typography variant='h3' my={3} color={'white'} sx={{fontSize: '35px'}}>
                        Student Management System | PHP 
                    </Typography>

                    <Typography variant='span' alt='img4' color={'white'} my={5}>
                    File Share is an American online file sharing and social media platform headquartered in San Bruno, California, United States. Accessible worldwide, it was launched on February 14, 2005, by Steve Chen, Chad Hurley, and Jawed Karim. It is owned by Google and is the second most visited website, after Google Search.
                    </Typography>
                </Grid>

                <Grid item lg={6}>
                    <Typography variant='h3' my={3} color={'white'} sx={{fontSize: '35px'}}>
                        Material UI Design
                    </Typography>

                    <Typography variant='span' color={'white'}>
                        Material UI is an American online video sharing and social media platform headquartered in San Bruno, California, United States. Accessible worldwide, it was launched on February 14, 2005, by Steve Chen, Chad Hurley, and Jawed Karim. It is owned by Google and is the second most visited website, after Google Search.
                    </Typography>
                </Grid>
                <Grid item lg={6}>
                    <img src='img4.png' alt='img4' style={{width:500, borderRadius:'5px'}}/>
                </Grid>
            </Grid>
                            
        </Container>

        <Footer marginT={'2600px'} linkSize={'25px'} linkStyle={props.linkStyle}/>
    </>
    
  )
}
```

### AboutPage.js

![About Page Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cfu6yaeayhxmfud5jntz.png)
I know the page looks very simple but you can add your own elements like images, paragraph etc to look better. 
```javascript
import{ Container, Typography, Box, Grid, Button } from '@mui/material/'
import {Card,CardActions,CardContent, CardMedia, CardHeader} from '@mui/material/'

import Footer from './Footer'


export default function AboutPage(props) {
  const cardStyle = {
    color: "#fff",
    backgroundColor: `${props.theme}`=='#001e3c' ? '#032d57' : '#001e3c',
    maxWidth: "300px",
    height: "400px"
  }
  return (
    <>
      <Container sx={{position:"relative", marginTop: '60px'}}>
          <Box color={'white'} sx={props.pageTextStyle}>
            <Grid container spacing={5} mx={5} my={5}>
            {/* Card 1 */}
              <Grid item lg={4}>
                <Card sx={cardStyle}>
                  <CardMedia
                    component='img'
                    height='195'
                    image='img1.png'
                    alt="Card Image"
                  />
                  <CardContent>
                    <Typography variant='h2'>Card title</Typography>
                  </CardContent>
                  <CardContent>
                    <Typography variant='span'>Card description</Typography>
                  </CardContent>

                  <CardActions>
                    <Button variant="outlined" color='secondary' sx={{'&:hover':{backgroundColor:'#9C27B0', color: 'white'}}}>Read More</Button>
                  </CardActions>
                </Card>
              </Grid>

              {/* Card 2 */}
              <Grid item lg={4}>
                <Card sx={cardStyle}>
                  <CardMedia
                      component='img'
                      height='195'
                      image='img2.png'
                      alt="Card Image"
                    />
                    <CardContent>
                      <Typography variant='h2'>Card title</Typography>
                    </CardContent>
                    <CardContent>
                      <Typography variant='span'>Card description</Typography>
                    </CardContent>

                    <CardActions>
                      <Button variant="outlined" color='secondary' sx={{'&:hover':{backgroundColor:'#9C27B0', color: 'white'}}}>Read More</Button>
                    </CardActions>
                  <CardContent>
                    <Typography variant='span'>Card description</Typography>
                  </CardContent>
                </Card>
              </Grid>

              {/* Card 3 */}
              <Grid item lg={4}>
                <Card sx={cardStyle}>
                  <CardMedia
                      component='img'
                      height='195'
                      image='img4.png'
                      alt="Card Image"
                    />
                    <CardContent>
                      <Typography variant='h2'>Card title</Typography>
                    </CardContent>
                    <CardContent>
                      <Typography variant='span'>Card description</Typography>
                    </CardContent>

                    <CardActions>
                      <Button 
                        variant="outlined" 
                        color='secondary' 
                        sx={
                          {'&:hover':{backgroundColor:'#9C27B0', color: 'white'}
                          }}>Read More
                          </Button>
                    </CardActions>
                </Card>
              </Grid>

            </Grid>

          </Box>
          
      </Container>

      <Footer linkStyle={props.linkStyle} marginT={'120px'}/>
    </>
  )
}


```
### ContactPage.js

![Contact Page Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mbqke9f1m37w0pd0ytsa.png)
```javascript
import { Container, Typography, Box, TextField, Button } from '@mui/material/'
import Footer from './Footer'
export default function ContactPage(props) {
  return (
    <>
    <Container style={{ position: "relative", top: "40px" }} fullWidth>

      <Box mx={40} px={5} py={5} color={'white'} sx={{ backgroundColor: "rgb(0,30,60)", input: {color: 'white'}, width:'500px'}}>
        <Typography variant='h2' my={2} >Contact Us</Typography>

        <form>
          <Typography variant='label' htmlFor='outlined-basic-email' color='secondary'>Full Name</Typography>
          <TextField sx={{ marginTop: '10px' }} type='password' name='password' color='secondary' id="outlined-basic-name" variant="outlined" fullWidth />
          <br /><br />
          <Typography variant='label' htmlFor='outlined-basic-email' color='secondary'>Email</Typography>
          <TextField sx={{ marginTop: '10px' }} type='email' name='email' color='secondary' id="outlined-basic-email" variant="outlined" fullWidth />
          <br /><br />
          <Typography variant='label' htmlFor='outlined-basic-email' color='secondary'>Message</Typography>
          <TextField sx={{ marginTop: '10px'}} type='text' name='password' color='secondary' id="outlined-basic-message" variant="outlined" fullWidth />
          <br /><br />
          
          <Button type='submit' variant='contained' color='secondary'>Submit</Button>
        </form>

      </Box>
    </Container>
    <Footer marginT={'70px'} linkStyle={props.linkStyle}/>
    </>
  )
}

```
### SignupPage.js

![Signup Page Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fwd8k1vps3wogux6lrm4.png)
```javascript
import{ Container, Typography, Box, Button } from '@mui/material/'
import TextField from '@mui/material/TextField'
import Footer from './Footer';
import { useNavigate } from 'react-router-dom';

export default function SignupPage(props) {
  const navigate = useNavigate();

  const handleSubmit=(event)=>{
    event.preventDefault(); 

    const email = event.target.email.value;
    const password = event.target.password.value;

    if(email!="" && password!=""){
      alert("Your email: "+email+" and Password: "+password)
    }else{
      alert("Please enter email and password")
    }
    
  }
  return (
    <>
        <Container style={{position:"absolute",top:"100px"}}>
            <Box ml={50} color={'white'} style={props.pageTextStyle}>
                
                <Box width={"500px"} mx={5} px={5} py={5} sx={{backgroundColor:"rgb(0,30,60)",input: { color: 'white' }}}>
                    <Typography variant='h2' my={2}>Sign Up</Typography>

                    <form onSubmit={handleSubmit}>
                      <Typography variant='label' htmlFor='outlined-basic-email'  color='secondary'>Email</Typography>
                      <TextField sx={{marginTop:'10px'}} type='email' name='email' color='secondary' id="outlined-basic-email" variant="outlined" fullWidth/>
                      <br/><br/>
                      <Typography variant='label' htmlFor='outlined-basic-email'  color='secondary'>Password</Typography>
                      <TextField sx={{marginTop:'10px'}} type='password' name='password' color='secondary' id="outlined-basic-password" variant="outlined" fullWidth />
                      <br/><br/>
                      <Button type='submit' variant='contained' color='secondary'>Signup</Button>
                      <br/>
                      <Typography variant='p' onClick={()=>navigate('/login')}>Don't have an account? Login here</Typography>
                    </form>
                    
                </Box>
               
            </Box>      
        </Container>
        <Footer marginT={'580px'} linkStyle={props.linkStyle}/>
    </>
    
  )
}

```

### Login.js

![Login Page Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e89wdnfr6o386lwtx6xz.png)
```javascript
import{ Container, Typography, Box, Button, Checkbox } from '@mui/material/'
import TextField from '@mui/material/TextField'
import Footer from './Footer';
import { useNavigate } from 'react-router-dom';
export default function Login(props) {
  const navigate = useNavigate();

  const handleSubmit=(event)=>{
    event.preventDefault(); 

    const email = event.target.email.value;
    const password = event.target.password.value;

    if(email!="" && password!=""){
      alert("Your email: "+email+" and Password: "+password)
    }else{
      alert("Please enter email and password")
    }
    
  }
  return (
    <>
        <Container style={{position:"absolute",top:"100px"}}>
            <Box ml={50} color={'white'} style={props.pageTextStyle}>
                
                <Box width={"500px"} mx={5} px={5} py={5} sx={{backgroundColor:"rgb(0,30,60)",input: { color: 'white' }}}>
                    <Typography variant='h2' my={2}>Login</Typography>

                    <form onSubmit={handleSubmit}>
                      <Typography variant='label' htmlFor='outlined-basic-email'  color='secondary'>Email</Typography>
                      <TextField sx={{marginTop:'10px'}} type='email' name='email' color='secondary' id="outlined-basic-email" variant="outlined" fullWidth/>
                      <br/><br/>
                      <Typography variant='label' htmlFor='outlined-basic-email'  color='secondary'>Password</Typography>
                      <TextField sx={{marginTop:'10px'}} type='password' name='password' color='secondary' id="outlined-basic-password" variant="outlined" fullWidth />
                      <br/><br/>
                      <Checkbox color='secondary'/> Remember Me
                      <br/><br/>
                      <Button type='submit' variant='contained' color='secondary'>Login</Button>
                      <br/>
                      <Typography variant='p' onClick={()=>navigate('/signup')}>Already have an account? Signup here</Typography>
                    </form>
                    
                </Box>
               
            </Box>      
        </Container>
        <Footer marginT={'600px'} linkStyle={props.linkStyle}/>
    </>
    
  )
}

```

### Footer.js

```javascript
import { Box, Grid} from "@mui/material"
import { Link } from 'react-router-dom'

export default function Footer(props) {
    
  return (

        <Box sx={{backgroundColor:"rgb(0,30,60)", height:"140px", marginTop:`${props.marginT}`, boxShadow:'10px 10px 10px 10px black'}}>
            <Grid container my={5} color={'white'} textAlign={'center'} justifyItems={'start'}>
                <Grid item lg={3} md={4} sm={3} xs={6} pt={2}>
                    <Link to='/' style={props.linkStyle}>Home</Link>
                </Grid>
                <Grid item lg={3} md={4} sm={3} xs={6} pt={2}>
                    <Link to='/about' style={props.linkStyle}>About</Link>
                </Grid>
                <Grid item lg={3} md={4} sm={3} xs={6} pt={2}>
                    <Link to='/contact' style={props.linkStyle}>Contact</Link>
                </Grid>
                <Grid item lg={3} md={4} sm={3} xs={6} pt={2}>
                    <Link to='/contact' style={props.linkStyle}>Contact</Link>
                </Grid>
                <Grid item lg={3} md={4} sm={3} xs={6} pt={2}>
                    <Link to='/contact' style={props.linkStyle}>Contact</Link>
                </Grid>
                <Grid item lg={3} md={4} sm={3} xs={6} pt={2}>
                    <Link to='/contact' style={props.linkStyle}>Contact</Link>
                </Grid>
                <Grid item lg={3} md={4} sm={3} xs={6} pt={2}>
                    <Link to='/contact' style={props.linkStyle}>Contact</Link>
                </Grid>
                <Grid item lg={3} md={4} sm={3} xs={6} pt={2}>
                    <Link to='/contact' style={props.linkStyle}>Contact</Link>
                </Grid>
                <Grid item lg={3} md={4} sm={3} xs={6} pt={2}>
                    <Link to='/contact' style={props.linkStyle}>Contact</Link>
                </Grid>
                <Grid item lg={3} md={4} sm={3} xs={6} pt={2}>
                    <Link to='/contact' style={props.linkStyle}>Contact</Link>
                </Grid>
                <Grid item lg={3} md={4} sm={3} xs={6} pt={2}>
                    <Link to='/contact' style={props.linkStyle}>Contact</Link>
                </Grid>
                <Grid item lg={3} md={4} sm={3} xs={6} pt={2}>
                    <Link to='/contact' style={props.linkStyle}>Contact</Link>
                </Grid>
                
            </Grid>
        </Box>
        

  )
}

```

You can change the page theme using Switch. I have created a function which can switch between **#001e3c** and **#032d57**.

![#032d57](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/csyiq4lnb7msoltpy929.png)

![#001e3c](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dbgxdmv989rqg3hv58zq.png)