Material Dashboard 2 
Material Dashboard is a free Material Bootstrap 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 was built over the popular Bootstrap framework and it comes with a couple of third-party plugins redesigned to fit in with the rest of the elements.
Material Dashboard 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.
This product came as a result of users asking for a material dashboard after we released our successful Material Kit. We developed it based on your feedback and it is a powerful bootstrap admin dashboard, which allows you to build products like admin panels, content managements systems and CRMs.
Material Dashboard 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.
Special thanks go to:
- Robert McIntosh for the notification system.
- Chartist for the wonderful charts. We are very excited to share this dashboard with you and we look forward to hearing your feedback!
Table of Contents
- Versions
- Demo
- Quick Start
- Documentation
- File Structure
- Browser Support
- Resources
- Reporting Issues
- Upgrade to PRO
- Technical Support or Questions
- Licensing
- Useful Links
Versions
BS5 | BS4 | Dark BS4 | React | Vue | Angular |
---|---|---|---|---|---|
![]() |
Vuetify | React Native | Nextjs | Nodejs |
---|---|---|---|
Laravel | Asp.NET | Django | Flask |
---|---|---|---|
Demo
Quick start
npm i material-dashboard
- Clone the repo:
git clone https://github.com/creativetimofficial/material-dashboard.git
. - Download from Github.
- Download from Creative Tim.
Documentation
The documentation for the Material Dashboard is hosted at our website.
File Structure
Within the download you'll find the following directories and files:
material-dashboard
├── assets
│ ├── css
│ ├── fonts
│ ├── img
│ ├── js
│ │ ├── core
│ │ ├── plugins
│ │ └── material-dashboard.js
│ │ └── material-dashboard.js.map
│ │ └── material-dashboard.min.js
│ └── scss
│ ├── material-dashboard
│ └── material-dashboard.scss
├── docs
│ ├── documentation.html
├── pages
├── CHANGELOG.md
├── gulpfile.js
├── package.json
Browser Support
At present, we officially aim to support the last two versions of the following browsers:
Resources
- Demo: https://demos.creative-tim.com/material-dashboard/pages/dashboard.html
- Download Page: https://www.creative-tim.com/product/material-dashboard
- Documentation: https://demos.creative-tim.com/material-dashboard/docs/2.1/getting-started/introduction.html
- License Agreement: https://www.creative-tim.com/license
- PRO Version: https://www.creative-tim.com/product/material-dashboard-pro
- Support: https://www.creative-tim.com/contact-us
- Issues: Github Issues Page
- Material Kit - For Front End Development
Reporting Issues
We use GitHub Issues as the official bug tracker for the Material Dashboard. Here are some advices for our users that want to report an issue:
- Make sure that you are using the latest version of the Material Dashboard. Check the CHANGELOG from your dashboard on our website.
- Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
- Some issues may be browser specific, so specifying in what browser you encountered the issue might help.
Upgrade to Premium version
Are you looking for more components? Please check our Premium Version of Material Dashboard here
Technical Support or Questions
If you have questions or need help integrating the product please contact us instead of opening an issue.
Licensing
-
Copyright 2021 Creative Tim (https://www.creative-tim.com/)
-
Licensed under MIT (https://github.com/creativetimofficial/material-dashboard/blob/master/LICENSE.md)
Useful Links
- More products from Creative Tim
- Tutorials
- Freebies from Creative Tim
- Affiliate Program (earn money)
- Bundles
- Material Design
- Get Discount
Social Media
- Twitter: https://twitter.com/CreativeTim
- Facebook: https://www.facebook.com/CreativeTim
- Dribbble: https://dribbble.com/creativetim
- TikTok: https://tiktok.com/@creative.tim
- Instagram: https://instagram.com/creativetimofficial
chars does not show up with multiple tabs
I am using material tabs as page subcategories in which there are multiple chartist charts. The problem is that chars does not show up except for first active tab. It seems that width comes as 0.
[Bug] CSS style problem in Safari 15.1 (macOS)
Version
v3.0.0 (according to the page source of demo dashboard page)
Reproduction link
https://demos.creative-tim.com/material-dashboard/pages/dashboard.html
Operating System
macOS 10.15.7
Device
iMac 21" (late 2013 model)
Browser & Version
Safari 15.1
Steps to reproduce
<select class="form-control">
) is also different. In Safari, the down arrow is missing.What is expected?
Expected that the visual styles of the Material Dashboard are identical across different browsers.
What is actually happening?
Safari does not show the correct styles.
Solution
As a workaround, set the following CSS:
Additional comments
Screenshots: https://imgur.com/a/ut6vT5s
SASS Error. Failed to Compile!
Prerequisites
Please answer the following questions for yourself before submitting an issue.
Expected Behavior
I´m looking for the first render but i can´t.
Current Behavior
Failed to Compile. ./src/assets/scss/argon-dashboard-react.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--6-oneOf-5-3!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-5-4!./src/assets/scss/argon-dashboard-react.scss) To import Sass files, you first need to install node-sass. Run
npm install node-sass
oryarn add node-sass
inside your workspace. Require stack:Navbar submenu does not work
Prerequisites
Please answer the following questions for yourself before submitting an issue.
Expected Behavior
Want to have a multi level drop down in the nabar.
Current Behavior
I have used the class submenu as mentioned in bootstrap 4 documentation. But no luck!
Material-dashboard and Asp.Net MVC 5 in one application
Hi, i try to run this material-dashboard angular app in Asp.Net MVC 5 and i have error:
core.es5.js:1020 ERROR ReferenceError: $ is not defined at HomeComponent.Array.concat.HomeComponent.ngOnInit (home.component.ts:19) at checkAndUpdateDirectiveInline (core.es5.js:10843) at checkAndUpdateNodeInline (core.es5.js:12341) at checkAndUpdateNode (core.es5.js:12284) at prodCheckAndUpdateNode (core.es5.js:12974) at Object.eval [as updateDirectives] (HomeComponent_Host.ngfactory.js:9) at Object.updateDirectives (core.es5.js:12718) at checkAndUpdateView (core.es5.js:12251) at callViewAction (core.es5.js:12599) at execEmbeddedViewsAction (core.es5.js:12557)
home.components.ts (19 line): ngOnInit() { $.getScript('../../../assets/js/material-dashboard.js'); $.getScript('../../../assets/js/initMenu.js'); }
If i run this app with 'ng serve' (without mvc app), it builds the application and starts a web server and everythink is ok.
But if i try to do it following steps: 1.)ng build 2.)move directory 'dist' to my mvc app (target operation of copy : MyMvcWeb\Scripts\NgApp )
My view in mvc app:
@{ Layout = null; }
Anyone knows what is wrong, what i have to do more or what is the problem?
Sidebar wrapper height calculation breaks when adding a taller logo
If you add an image, or create a multi line text... Any element which height is bigger than the actual "CREATIVE TIM" text, the wrapper is adding additional space towards the bottom of the page and sidebar "floats"...
~I fixed it by switching to
height: auto
or directly removing that line:~ (nvm, it doesnt fix the problem, because you can't scroll down on smaller screens, probably the best way is to setoverflow-y:hidden
forbody .wrapper
) https://github.com/creativetimofficial/material-dashboard/blob/master/assets/css/material-dashboard.css#L445Uncaught TypeError: $(...).bootstrapMaterialDesign is not a function
Prerequisites
Please answer the following questions for yourself before submitting an issue.
Expected Behavior
Please describe the behavior you are expecting I would like to use the Material Dashboard (Design) for Laravel and the Editor (Datatables.net).
Current Behavior
What is the current behavior?
Failure Information (for bugs)
I can only use the the function from the sidebar OR the Editor (from datatables.net) Please help provide information about the failure if this is a bug. If it is not a bug, please remove the rest of this template.
Steps to Reproduce
Please provide detailed steps for reproducing the issue.
Context
Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.
Failure Logs
Please include any relevant log snippets or files here. To use the Editor (datatables.net) in my material-Dashboard for laravel project, I need to create and use an app.js/bootrap.js. My app.blade.php looks like this:
Sidebar Mini
Sidebar Images
My app.js looks like this: require('./bootstrap');
And my bootsrap.js looks like this: window._ = require('lodash');
/**
try { window.Popper = require('popper.js').default; window.$ = window.jQuery = require('jquery');
} catch (e) {}
/**
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
/**
// import Echo from 'laravel-echo';
// window.Pusher = require('pusher-js');
// window.Echo = new Echo({ // broadcaster: 'pusher', // key: process.env.MIX_PUSHER_APP_KEY, // cluster: process.env.MIX_PUSHER_APP_CLUSTER, // encrypted: true // });
npm install WARN deprecated [email protected]: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1
Prerequisites
Please answer the following questions for yourself before submitting an issue.
Expected Behavior
Please describe the behavior you are expecting On npm install, I'm expecting no warnings for deprecated: npm WARN deprecated [email protected]: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1 Please provide instructions to upgrade
Current Behavior
What is the current behavior? npm WARN deprecated [email protected]
Suggestion
I think the way the brand-primary color is being implemented right now can be somewhat misleading, as it's based on the components having the data-color set to purple. So, changing the primary color to light-blue and having the data-color set to purple... I suggest setting a the data-color across the project pointing to something like: 'primary' so it can be easier to understand.
Also, this is about the angular material dashboard, all the data-colors for the primary color has been set to "red" so, changing the variable in line 28 of _colors has no effect.
Include data validation and text editor plugins
Hi,
I would like us to include data validation and text editor plugins. They are a must have on the admin dashboard panels.
I would like if we could edit the
summernote js
plugin fetched from https://summernote.org css and js code to fit in with material design principles. And also edit thejquery validation plugin js
fetched from https://jqueryvalidation.org as suggestions.Please, I have used your material dashboard plugin to develop an admin panel for one of my clients and they like it. But now these two plugins are required and I don't know where to start or to go about it.
Any advice will be much appreciated.
Checkbox
Hi! I have an issue with a checkbox. It works only twice.
On the gif you can see that I click and then do it again. Checkbox changes it's state. And when I click on it again, it does not change the state.
The head content is following:
I work with ASP.NET, so this is the way I use a checkbox:
Please, help me to fix the issue.
[Feature Request] Documentation Datatable AJAX/fetch Request
What is your enhancement?
hello,
I've suscribe Pro subcription, and I've problem for use simpledatatable with Ajax and Fetch request in Jquery. Can you help me ?
[Bug] Template does not work
Version
2.12
Reproduction link
https://demos.creative-tim.com/material-dashboard/docs/2.1/getting-started/introduction.html
Operating System
Mac
Device
Mac
Browser & Version
Chrome
Steps to reproduce
1: Download code from Github 2: Try to run minimal Flask app serving "basic template" 3: It does not work because the
What is expected?
The page is styled.
What is actually happening?
The page is completely unstyled. No CSS whatsoever.
Solution
Buy a different template
Additional comments
[Bug] TypeError: Cannot convert object to primitive value
Version
v2.1.0
Reproduction link
https://github.com/twbs/bootstrap/issues/30553#issuecomment-612617589
Operating System
Ubuntu
Device
PC and Mobile
Browser & Version
All Browsers
Steps to reproduce
js9support.min.js
as example shows.What is expected?
When
navbar-toggler
width data-target of#navigation-example
is clicked an animation to open a side bar is expected.What is actually happening?
An error says
TypeError: Cannot convert object to primitive value
and no side bar is openedSolution
https://github.com/twbs/bootstrap/issues/30553#issuecomment-612617589
chanhed this line:
if (!i && l.toggle && /show|hide/.test(t) && (l.toggle = !1), i || (i = new r(this, l), o.data(n, i)), 'string' == typeof t) {
to this:
if (!i && l.toggle && /show|hide/.test(l) && (l.toggle = !1), i || (i = new r(this, l), o.data(n, i)), 'string' == typeof t) {
Additional comments
Unfortunately my code is not in production. So I cannot create a codepen etc...
[Bug] referenceButtons creates errors when undefined
Version
BS5
Reproduction link
https://github.com/Seneca-CDOT/telescope/issues/2691
Operating System
Windows/OS
Device
PC
Browser & Version
Chrome Version 97.0.4692.99
Steps to reproduce
ReferenceButtons is not always defined, See https://github.com/creativetimofficial/material-dashboard/blob/66716686d10a8f1ed754f93bb52b3a922db1ffcf/assets/js/material-dashboard.js#L626.
We should protect this.
What is expected?
There should not be any errors in console due to undefined variables.
What is actually happening?
Error in console:
Uncaught TypeError: Cannot read properties of null (reading 'classList') at 'navbarColorOnResize.
Solution
use optional chaining as below:
if (referenceButtons?.classList.contains('active') && referenceButtons?.getAttribute('data-class') === 'bg-transparent') {
Additional comments
I'd be happy to contribute the fix for this.
[Bug] not working with node 16
Version
master
Reproduction link
https://gitlab.com/ldath-core/examples/ex-material-dashboard/-/pipelines/430662461
Operating System
linux
Device
docker
Browser & Version
terminal
Steps to reproduce
npm install when having installed node 16
What is expected?
installing packages from package.json
What is actually happening?
npm ERR! make: *** [binding.target.mk:133: Release/obj.target/binding/src/binding.o] Error 1 npm ERR! gyp ERR! build error npm ERR! gyp ERR! stack Error:
make
failed with exit code: 2 npm ERR! gyp ERR! stack at ChildProcess.onExit (/builds/ldath-core/examples/ex-material-dashboard/node_modules/node-gyp/lib/build.js:262:23) npm ERR! gyp ERR! stack at ChildProcess.emit (node:events:390:28) npm ERR! gyp ERR! stack at Process.ChildProcess._handle.onexit (node:internal/child_process:290:12) npm ERR! gyp ERR! System Linux 5.4.109+ npm ERR! gyp ERR! command "/usr/local/bin/node" "/builds/ldath-core/examples/ex-material-dashboard/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library=" npm ERR! gyp ERR! cwd /builds/ldath-core/examples/ex-material-dashboard/node_modules/node-sass npm ERR! gyp ERR! node -v v16.13.1 npm ERR! gyp ERR! node-gyp -v v3.8.0 npm ERR! gyp ERR! not ok npm ERR! Build failed with error code: 1 npm ERR! A complete log of this run can be found in: npm ERR! /root/.npm/_logs/2021-12-16T01_47_13_377Z-debug.logSolution
looks like to old version of node-sass is used by gyp
Additional comments