material-dashboard-react
Advanced tools
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 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 was created using create-react-app and it uses a framework built by our friend Olivier - Material-UI v3.1.0, 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:
We are very excited to share this dashboard with you and we look forward to hearing your feedback!
You can find the Github Repo here.
| HTML | React | Vue | Angular |
|---|---|---|---|
 |  |  |  |
| Dashboard | User Profile | Tables | Maps | Notification |
|---|---|---|---|---|
 |  |  |  |  |
Quick start options:
npm i material-dashboard-reactgit clone https://github.com/creativetimofficial/material-dashboard-react.git.The documentation for the Material Dashboard React is hosted at our website.
Within the download you'll find the following directories and files:
material-dashboard-react
.
├── CHANGELOG.md
├── ISSUE_TEMPLATE.md
├── LICENSE.md
├── README.md
├── bower.json
├── gulpfile.js
├── jsconfig.json
├── package.json
├── documentation
│ ├── assets
│ │ ├── css
│ │ ├── img
│ │ │ └── faces
│ │ └── js
│ └── tutorial-components.html
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
└── src
├── index.js
├── logo.svg
├── routes.js
├── assets
│ ├── css
│ │ └── material-dashboard-react.css
│ ├── github
│ │ ├── md-react.gif
│ │ └── react.svg
│ ├── img
│ │ └── faces
│ └── jss
│ ├── material-dashboard-react
│ │ ├── components
│ │ ├── layouts
│ │ └── views
│ └── material-dashboard-react.js
├── components
│ ├── Card
│ │ ├── Card.js
│ │ ├── CardAvatar.js
│ │ ├── CardBody.js
│ │ ├── CardFooter.js
│ │ ├── CardHeader.js
│ │ └── CardIcon.js
│ ├── CustomButtons
│ │ └── Button.js
│ ├── CustomInput
│ │ └── CustomInput.js
│ ├── CustomTabs
│ │ └── CustomTabs.js
│ ├── FixedPlugin
│ │ └── FixedPlugin.js
│ ├── Footer
│ │ └── Footer.js
│ ├── Grid
│ │ ├── GridContainer.js
│ │ └── GridItem.js
│ ├── Navbars
│ │ ├── AdminNavbarLinks.js
│ │ ├── Navbar.js
│ │ └── RTLNavbarLinks.js
│ ├── Sidebar
│ │ └── Sidebar.js
│ ├── Snackbar
│ │ ├── Snackbar.js
│ │ └── SnackbarContent.js
│ ├── Table
│ │ └── Table.js
│ ├── Tasks
│ │ └── Tasks.js
│ └── Typography
│ ├── Danger.js
│ ├── Info.js
│ ├── Muted.js
│ ├── Primary.js
│ ├── Quote.js
│ ├── Success.js
│ └── Warning.js
├── layouts
│ ├── Admin.js
│ └── RTL.js
├── variables
│ ├── charts.js
│ └── general.js
└── views
├── Dashboard
│ └── Dashboard.js
├── Icons
│ └── Icons.js
├── Maps
│ └── Maps.js
├── Notifications
│ └── Notifications.js
├── RTLPage
│ └── RTLPage.js
├── TableList
│ └── TableList.js
├── Typography
│ └── Typography.js
├── UpgradeToPro
│ └── UpgradeToPro.js
└── UserProfile
└── UserProfile.js
At present, we officially aim to support the last two versions of the following browsers:
We use GitHub Issues as the official bug tracker for the Material Dashboard React. Here are some advices for our users that want to report an issue:
If you have questions or need help integrating the product please contact us instead of opening an issue.
More products from Creative Tim: https://www.creative-tim.com/products
Tutorials: https://www.youtube.com/channel/UCVyTG4sCw-rOvB9oHkzZD1w
Freebies: https://www.creative-tim.com/products
Affiliate Program (earn money): https://www.creative-tim.com/affiliates/new
Social Media:
Twitter: https://twitter.com/CreativeTim
Facebook: https://www.facebook.com/CreativeTim
Dribbble: https://dribbble.com/creativetim
Google+: https://plus.google.com/+CreativetimPage
Instagram: https://instagram.com/creativetimofficial
[1.10.0] 2020-05-07
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)@babel/core@7.14.0 (to stop install warnings)@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
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 react-swipeable-views@0.13.9 requires a peer of react@^15.3.0 || ^16.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-event-listener@0.6.6 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.
FAQs
Material Dashboard React. Coded by Creative Tim
We found that material-dashboard-react demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
North Korean threat actors deploy 67 malicious npm packages using the newly discovered XORIndex malware loader.
Security News
Meet Socket at Black Hat & DEF CON 2025 for 1:1s, insider security talks at Allegiant Stadium, and a private dinner with top minds in software supply chain security.
Security News
CAI is a new open source AI framework that automates penetration testing tasks like scanning and exploitation up to 3,600× faster than humans.