Material Dashboard React is a free Material-UI Admin with a fresh, new design inspired by Google's Material Design. We are very excited to introduce our take on the material concepts through an easy to use and beautiful set of components. Material Dashboard React was built over the popular Material-UI v4.1.0 framework.
Material Dashboard React makes use of light, surface and movement. The general layout resembles sheets of paper following multiple different layers, so that the depth and order is obvious. The navigation stays mainly on the left sidebar and the content is on the right inside the main panel.
Material Dashboard React comes with 5 color filter choices for both the sidebar and the card headers (blue, green, orange, red and purple) and an option to have a background image on the sidebar.
Material Dashboard React uses a framework built by our friend Olivier - Material-UI, who did an amazing job creating the backbone for the material effects, animations, ripples and transitions. Big thanks to his team for the effort and forward thinking they put into it.
Special thanks go to:
React-chartist for the wonderful charts.
We are very excited to share this dashboard with you and we look forward to hearing your feedback!
useLocation
from react-router-dom
)react-google-maps
(we've replaced this with simple Google Maps API)@types/googlemaps
(we've replaced this with simple Google Maps API)@types/markerclustererplus
(we've replaced this with simple Google Maps API)ajv
(this was only installed to stop some install warnings)history
(we'll use BrowserRouter
from react-router-dom
package instead)
### Added dependencies@babel/[email protected]
(to stop install warnings)
### Updated dependencies
@material-ui/core 4.10.0 → 4.11.4
@material-ui/icons 4.9.1 → 4.11.2
classnames 2.2.6 → 2.3.1
perfect-scrollbar 1.5.0 → 1.5.1
react 16.13.1 → 17.0.2
react-chartist 0.14.3 → 0.14.4
react-dom 16.13.1 → 17.0.2
react-scripts 3.4.1 → 4.0.3
eslint-config-prettier 6.11.0 → 8.3.0
eslint-plugin-prettier 3.1.3 → 3.4.0
gulp-append-prepend 1.0.8 → 1.0.9
prettier 2.0.5 → 2.2.1
typescript 3.9.3 → 4.2.4
### Warning
Warnings might appear while doing an npm install - they do not affect the UI or the functionality of the product, and they appear because of NodeJS and not from the product itself.
npm WARN [email protected] requires a peer of react@^15.3.0 || ^16.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react@^16.3.0 but none is installed. You must install peer dependencies yourself.
You will also have the following message: found 88 vulnerabilities (1 low, 87 moderate) in 2207 scanned packages
. This comes from react-scripts, and will be fixed in the next version. NOTE: the product works as expected with these vulnerabilities
.
@material-ui/core 4.3.2 → 4.10.0
@material-ui/icons 4.2.1 → 4.9.1
history 4.9.0 → 4.10.1
perfect-scrollbar 1.4.0 → 1.5.0
react 16.9.0 → 16.13.1
react-chartist 0.13.3 → 0.14.3
react-dom 16.9.0 → 16.13.1
react-router-dom 5.0.1 → 5.2.0
react-scripts 3.1.0 → 3.4.1
react-swipeable-views 0.13.3 → 0.13.9
eslint-config-prettier 6.0.0 → 6.11.0
eslint-plugin-prettier 3.1.0 → 3.1.3
prettier 1.18.2 → 2.0.5
@types/googlemaps 3.37.3 → 3.39.6
ajv 6.10.2 → 6.12.2
typescript 3.5.3 → 3.9.3
### Warning
While in development some of the plugins that were used for this product will throw some warnings - note, this only happens in development, the UI or the functionality of the product is not affected, also, if the issues will persist in React 17, we'll drop usage of those plugins, and replace them with other ones.
Warnings might appear while doing an npm install - they do not affect the UI or the functionality of the product, and they appear because of NodeJS and not from the product itself..jsx
to .js
withStyles
function from Material-UI with the makeStyles
function (integration with other frameworks should now be easy)assets/jss/material-dashboard-react/layouts/dashboardStyle.js
to assets/jss/material-dashboard-react/layouts/adminStyle.js
### Deleted components
### Added components
### Deleted dependencies
### Added dependencies
@material-ui/core 4.1.0 → 4.3.2
@material-ui/icons 4.1.0 → 4.2.1
react 16.8.6 → 16.9.0
react-dom 16.8.6 → 16.9.0
react-scripts 3.0.1 → 3.1.0
eslint-config-prettier 4.3.0 → 6.0.0
@types/googlemaps 3.36.4 → 3.37.3
ajv 6.10.0 → 6.10.2
typescript 3.5.1 → 3.5.3
All React Material products have now the same version, i.e. 1.7.0. - All linting errors are solved now, but due to google analytics stuff, we've needed to add target="_blank" to our links, so this lint error still exists.
.env
file, and replaced it with the jsconfig.json
fileReact.createRef()
@material-ui/core 3.9.2 → 4.1.0
@material-ui/icons 3.0.2 → 4.1.0
chartist 0.10.1 → 0.11.2
history 4.7.2 → 4.9.0
prettier 1.16.4 → 1.18.2
prop-types 15.7.1 → 15.7.2
react 16.8.1 → 16.8.6
react-dom 16.8.1 → 16.8.6
react-router-dom 4.3.1 → 5.0.1
react-scripts 2.1.5 → 3.0.1
react-swipeable-views 0.13.1 → 0.13.3
eslint-config-prettier 4.0.0 → 4.3.0
eslint-plugin-prettier 3.0.1 → 3.1.0
@types/googlemaps 3.30.16 → 3.36.4
ajv 6.9.1 → 6.10.0
babel-plugin-module-resolver
(because of the upgrade of react-scripts
)babel-eslint
(because of the upgrade of react-scripts
)eslint
(because of the upgrade of react-scripts
)eslint-plugin-react
(because of the upgrade of react-scripts
)npm-run-all
### Added dependencieshistory4.7.2
[email protected]
[email protected]
### Updated dependencies@material-ui/core
3.1.0 → 3.9.2@material-ui/icons
3.0.1 → 3.0.2@types/googlemaps
3.30.13 → 3.30.16ajv
^5.0.0 → 6.9.1prop-types
15.6.2 → 15.7.1react
16.5.2 → 16.8.1react-chartist
0.13.1 → 0.13.3react-dom
16.5.2 → 16.8.1react-scripts
1.1.5 → 2.1.5react-swipeable-views
0.12.17 → 0.13.1eslint-config-prettier
3.0.1 → 4.0.0eslint-plugin-prettier
2.6.2 → 3.0.1install:clean
command (deletes node_modules
and package-lock.json
and runs npm install
)
### Major style changessrc/assets/jss/material-dashboard-react/components/tasksStyle.jsx
src/assets/jss/material-dashboard-react/checkboxAdnRadioStyle.jsx
src/assets/jss/material-dashboard-react/components/customTabsStyle.jsx
src/assets/jss/material-dashboard-react/components/snackbarContentStyle.jsx
### Deleted dependencies@babel/runtime v7.0.0-beta.55
### Added dependencies
### Updated dependencies@material-ui/core
1.4.3 → 3.1.0@material-ui/icons
2.0.1 → 3.0.1@types/googlemaps
3.30.11 → 3.30.13ajv
6.5.2 → 5.0.0 (to stop some warnings)react
16.4.1 → 16.5.2react-dom
16.4.1 → 16.5.2react-scripts
1.1.4 → 1.1.5react-swipeable-views
0.12.15 → 0.12.17eslint-config-prettier
^2.9.0 → 3.0.1eslint-plugin-react
^7.10.0 → 7.11.1prettier
^1.13.7 → 1.14.3https://github.com/creativetimofficial/material-dashboard-react/issues/58
GridContainer
component
### Major style changessrc/assets/jss/material-dashboard-react/components/footerStyle.jsx
src/assets/jss/material-dashboard-react/components/headerStyle.jsx
### Added dependencies@babel/runtime v7.0.0-beta.55
### Update dependencies@material-ui/core v1.4.1
to @material-ui/core v1.4.3
@material-ui/icons v2.0.0
to @material-ui/icons v2.0.1
react-popper
in favour of @material-ui/core/Popper
)svg
's, font-awesome classes and .material-icons
class inside
src/assets/jss/material-dashboard-react/views/dashboardStyle.jsx
src/assets/jss/material-dashboard-react/components/buttonStyle.jsx
src/assets/jss/material-dashboard-react/components/cardFooterStyle.jsx
src/assets/jss/material-dashboard-react/components/cardHeaderStyle.jsx
src/assets/jss/material-dashboard-react/components/headerLinksStyle.jsx
src/assets/jss/material-dashboard-react/components/customTabsStyle.jsx
src/assets/jss/material-dashboard-react/tooltipStyle.jsx
src/assets/jss/material-dashboard-react/dropdownStyle.jsx
### Dropped components@material-ui/core/Popper
(Changes in src/components/Header/HeaderLinks.jsx
)
### Added componentssrc/components/Grid/GridContainer.jsx
(instead of MUI's <Grid container...
component)
### Deleted dependencies
### Added dependencies
### Update dependencies@material-ui/core v1.2.1
to @material-ui/core v1.4.1
@material-ui/icons v1.1.0
to @material-ui/icons v2.0.0
@types/googlemaps v3.30.9
to @types/googlemaps v3.30.11
ajv v6.5.1
to ajv v6.5.2
react v16.4.0
to react v16.4.1
react-dom v16.4.0
to react-dom v16.4.1
react-swipeable-views v0.12.13
to react-swipeable-views v0.12.15
material-ui
to @material-ui/core
src/components/index.js
, and changed all the imports to separate onesItemGrid
to GridItem
### Major style changessrc/components/
inside src/assets/jss/material-dashboard-react/components/
src/layouts/
inside src/assets/jss/material-dashboard-react/layouts/
src/views/
inside src/assets/jss/material-dashboard-react/views/
src/components/CustomButtons/IconButton.jsx
(instead use src/components/CustomButtons/Button.jsx
with justIcon
prop)src/components/Typography
(instead of these we've added some css to style the normal HTML tags)
src/components/Typography/A.jsx
src/components/Typography/P.jsx
src/components/Typography/Small.jsx
src/components/Cards
src/components/Cards/ChartCard.jsx
src/components/Cards/ProfileCard.jsx
src/components/Cards/RegularCard.jsx
src/components/Cards/StatsCard.jsx
src/components/Cards/TasksCard.jsx
### Added componentssrc/components/Card/*
) instead of src/components/Cards/*
src/components/Card/Card.jsx
src/components/Card/CardAvatar.jsx
src/components/Card/CardBody.jsx
src/components/Card/CardFooter.jsx
src/components/Card/CardHeader.jsx
src/components/Card/CardIcon.jsx
src/components/CustomTabs/CustomTabs.jsx
(instead of src/components/Cards/TasksCard.jsx
)
### Deleted dependencies[email protected]
### Added dependencies@material-ui/[email protected]
(instead of [email protected]
)@types/[email protected]
to stop the warning: npm WARN [email protected] requires a peer of @types/googlemaps@^3.0.0 but none is installed. You must install peer dependencies yourself.@types/[email protected]
to stop the warning: npm WARN [email protected] requires a peer of @types/markerclustererplus@^2.1.29 but none is installed. You must install peer dependencies yourself.[email protected]
to stop the warning: npm WARN [email protected] requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
### Update dependencies@material-ui/[email protected]
to @material-ui/[email protected]
[email protected]
to [email protected]
[email protected]
to [email protected]
[email protected]
to [email protected]
[email protected]
to [email protected]
[email protected]
to [email protected]
[email protected]
to [email protected]
[email protected]
to [email protected]
[email protected]
to [email protected]
src/containers/App/App.jsx
to src/layouts/Dashboard/Dashboard.jsx
src/variables/styles.jsx
to src/assets/jss/material-dashboard-react.jsx
src/variables/styles/
to src/assets/jss/material-dashboard-react/
material-ui
[email protected]
### Update dependencies[email protected]
to [email protected]
### Added dependencies@material-ui/[email protected]
classes={root:...}
to classNames={...}
only where it had classes={root:...}
and not like classes={root:..., something:... ,...}
classnames()
to avoid doing brittle class name manipulationsrc/variables/styles.jsx
and all the components styles in src/variables/styles/{$componentNameStyle}.jsx
files-webkit-overflow-scrolling: touch
css for nice scrolling on mobile devicesMaterial-UI
version (from v1.0.0.beta30
to v1.0.0.beta34
)Join our newsletter