Material-UI Templates for Business

Build your dream React app with our modern responsive templates

Material-UI Templates

Elite Material DashboardFREE

Elite Material Dashboard - Free Edition

Explore a multi-page responsive dashboard built with React, Material-UI, Redux, HighCharts and more.

Live PreviewDownload Now

Where to get free Material UI templates

Looking for Material UI templates to start your next project?

We created an 8-page React Dashboard Template built with Material UI and Redux.

After confirming you will be sent to download the zip file.

Material UI Official Free Templates

Our template combines components found on Material UI's official templates.

Check out Material UI's Official Free Templates here.

These templates are a great place to start because they gaurantee Material UI's best practices. Not only will you get an awesome looking set of components assembled together, but you'll get to actually learn better ways to use those components.

For example, when viewing these components in isolation, you miss out on things that come into play when arranging these components together.

Material UI Sign in Template

Once on the templates page, you can find the simple Sign In template, and then click view source.

That looks like this:

The code for that is below. It's a pretty nice looking component for 100 lines of code, isn't it? This is a great example of using a Container to center some content on a page using the maxWidth property.

Hey totally unrelated, but why not check out our free template and course: React Business Dashboards. We show you how to build a business dashboard with React, Styled-components, HighCharts and React-Virtualized.

import React from 'react';
import Avatar from '@material-ui/core/Avatar';
import Button from '@material-ui/core/Button';
import CssBaseline from '@material-ui/core/CssBaseline';
import TextField from '@material-ui/core/TextField';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
import Link from '@material-ui/core/Link';
import Grid from '@material-ui/core/Grid';
import Box from '@material-ui/core/Box';
import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
import Typography from '@material-ui/core/Typography';
import { makeStyles } from '@material-ui/core/styles';
import Container from '@material-ui/core/Container';
function Copyright() {
  return (
    <Typography variant="body2" color="textSecondary" align="center">
      {'Copyright © '}
      <Link color="inherit" href="https://material-ui.com/">
        Your Website
      </Link>{' '}
      {new Date().getFullYear()}
      {'.'}
    </Typography>
  );
}
const useStyles = makeStyles((theme) => ({
  paper: {
    marginTop: theme.spacing(8),
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
  },
  avatar: {
    margin: theme.spacing(1),
    backgroundColor: theme.palette.secondary.main,
  },
  form: {
    width: '100%', // Fix IE 11 issue.
    marginTop: theme.spacing(1),
  },
  submit: {
    margin: theme.spacing(3, 0, 2),
  },
}));
export default function SignIn() {
  const classes = useStyles();
  return (
    <Container component="main" maxWidth="xs">
      <CssBaseline />
      <div className={classes.paper}>
        <Avatar className={classes.avatar}>
          <LockOutlinedIcon />
        </Avatar>
        <Typography component="h1" variant="h5">
          Sign in
        </Typography>
        <form className={classes.form} noValidate>
          <TextField
            variant="outlined"
            margin="normal"
            required
            fullWidth
            id="email"
            label="Email Address"
            name="email"
            autoComplete="email"
            autoFocus
          />
          <TextField
            variant="outlined"
            margin="normal"
            required
            fullWidth
            name="password"
            label="Password"
            type="password"
            id="password"
            autoComplete="current-password"
          />
          <FormControlLabel
            control={<Checkbox value="remember" color="primary" />}
            label="Remember me"
          />
          <Button
            type="submit"
            fullWidth
            variant="contained"
            color="primary"
            className={classes.submit}
          >
            Sign In
          </Button>
          <Grid container>
            <Grid item xs>
              <Link href="#" variant="body2">
                Forgot password?
              </Link>
            </Grid>
            <Grid item>
              <Link href="#" variant="body2">
                {"Don't have an account? Sign Up"}
              </Link>
            </Grid>
          </Grid>
        </form>
      </div>
      <Box mt={8}>
        <Copyright />
      </Box>
    </Container>
  );
}