DEV Community

Cover image for Material UI Design | React |
Madhuban Khatri
Madhuban Khatri

Posted on • Updated on

Material UI Design | React |

Hello Friends, This is Madhuban Khatri and Here I am sharing you Material UI Design code

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
Enter fullscreen mode Exit fullscreen mode

Source Code

App.js

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;
Enter fullscreen mode Exit fullscreen mode

Navbar.js

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>

        </>
  )
}

Enter fullscreen mode Exit fullscreen mode

HomePage.js

Home page image

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}/>
    </>

  )
}
Enter fullscreen mode Exit fullscreen mode

AboutPage.js

About Page Image
I know the page looks very simple but you can add your own elements like images, paragraph etc to look better.

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'}/>
    </>
  )
}


Enter fullscreen mode Exit fullscreen mode

ContactPage.js

Contact Page Image

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}/>
    </>
  )
}

Enter fullscreen mode Exit fullscreen mode

SignupPage.js

Signup Page Image

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}/>
    </>

  )
}

Enter fullscreen mode Exit fullscreen mode

Login.js

Login Page Image

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}/>
    </>

  )
}

Enter fullscreen mode Exit fullscreen mode

Footer.js

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>


  )
}

Enter fullscreen mode Exit fullscreen mode

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

#032d57

#001e3c

Top comments (0)