Material Dashboard - Open Source Bootstrap 5 Material Design Admin

  • By Creative Tim
  • Last update: Jan 7, 2023
  • Comments: 16

Material Dashboard 2 Tweet

version GitHub issues open GitHub issues closed


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


BS5 BS4 Dark BS4 React Vue Angular
Material Dashboard  HTML Material Dashboard  HTML Material Dashboard Dark Edition Material Dashboard  React Vue Material Dashboard Material Dashboard  Angular
Vuetify React Native Nextjs Nodejs
Material Dashboard  Vuetify React Native Nextjs Material Dashboard Material Dashboard React Nodejs
Laravel Asp.NET Django Flask
Material Dashboard Laravel Asp.NET Material Dashboard Django Material Dashboard Flask


View More.

Quick start


The documentation for the Material Dashboard is hosted at our website.

File Structure

Within the download you'll find the following directories and files:

    ├── assets
    │   ├── css
    │   ├── fonts
    │   ├── img
    │   ├── js
    │   │   ├── core
    │   │   ├── plugins
    │   │   └── material-dashboard.js
    │   │   └──
    │   │   └── material-dashboard.min.js
    │   └── scss
    │       ├── material-dashboard
    │       └── material-dashboard.scss
    ├── docs
    │   ├── documentation.html
    ├── pages
    ├── gulpfile.js
    ├── package.json

Browser Support

At present, we officially aim to support the last two versions of the following browsers:


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:

  1. Make sure that you are using the latest version of the Material Dashboard. Check the CHANGELOG from your dashboard on our website.
  2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
  3. 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.


Useful Links

Social Media



  • 1

    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.

  • 2

    [Bug] CSS style problem in Safari 15.1 (macOS)


    v3.0.0 (according to the page source of demo dashboard page)

    Reproduction link

    Operating System

    macOS 10.15.7


    iMac 21" (late 2013 model)

    Browser & Version

    Safari 15.1

    Steps to reproduce

    1. Open the Creative Tim's Material Dashboard demo link (
    2. Notice the lower-left corner "Upgrade to Pro" button. In Safari, it is a grey rectangle (in other browsers like Chrome, it's a pink button)
    3. The style of Drop Down box (<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.


    As a workaround, set the following CSS:

    .btn-primary, {
        -webkit-appearance: none;

    Additional comments


  • 3

    SASS Error. Failed to Compile!


    Please answer the following questions for yourself before submitting an issue.

    • [x] I am running the latest version
    • [x] I checked the documentation and found no answer
    • [x] I checked to make sure that this issue has not already been filed
    • [ ] I'm reporting the issue to the correct repository (for multi-repository projects)

    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 or yarn add node-sass inside your workspace. Require stack:

    • C:\Users\dsabi\Downloads\argon-dashboard-react-master\argon-dashboard-react-master\node_modules\sass-loader\dist\getDefaultSassImplementation.js
    • C:\Users\dsabi\Downloads\argon-dashboard-react-master\argon-dashboard-react-master\node_modules\sass-loader\dist\getSassImplementation.js
    • C:\Users\dsabi\Downloads\argon-dashboard-react-master\argon-dashboard-react-master\node_modules\sass-loader\dist\index.js
    • C:\Users\dsabi\Downloads\argon-dashboard-react-master\argon-dashboard-react-master\node_modules\sass-loader\dist\cjs.js
    • C:\Users\dsabi\Downloads\argon-dashboard-react-master\argon-dashboard-react-master\node_modules\loader-runner\lib\loadLoader.js
    • C:\Users\dsabi\Downloads\argon-dashboard-react-master\argon-dashboard-react-master\node_modules\loader-runner\lib\LoaderRunner.js
    • C:\Users\dsabi\Downloads\argon-dashboard-react-master\argon-dashboard-react-master\node_modules\webpack\lib\NormalModule.js
    • C:\Users\dsabi\Downloads\argon-dashboard-react-master\argon-dashboard-react-master\node_modules\webpack\lib\NormalModuleFactory.js
    • C:\Users\dsabi\Downloads\argon-dashboard-react-master\argon-dashboard-react-master\node_modules\webpack\lib\Compiler.js
    • C:\Users\dsabi\Downloads\argon-dashboard-react-master\argon-dashboard-react-master\node_modules\webpack\lib\webpack.js
    • C:\Users\dsabi\Downloads\argon-dashboard-react-master\argon-dashboard-react-master\node_modules\react-scripts\scripts\start.js
  • 4

    Navbar submenu does not work


    Please answer the following questions for yourself before submitting an issue.

    • [ *] I am running the latest version
    • [* ] I checked the documentation and found no answer
    • [* ] I checked to make sure that this issue has not already been filed
    • [ *] I'm reporting the issue to the correct repository (for multi-repository projects)

    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!

  • 5

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

    Test app Loading..

    Anyone knows what is wrong, what i have to do more or what is the problem?

  • 6

    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 set overflow-y:hidden for body .wrapper)

  • 7

    Uncaught TypeError: $(...).bootstrapMaterialDesign is not a function


    Please answer the following questions for yourself before submitting an issue.

    • [x ] I am running the latest version
    • [x ] I checked the documentation and found no answer
    • [x ] I checked to make sure that this issue has not already been filed
    • [ x] I'm reporting the issue to the correct repository (for multi-repository projects)

    Expected Behavior

    Please describe the behavior you are expecting I would like to use the Material Dashboard (Design) for Laravel and the Editor (

    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 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.

    1. step 1
    2. step 2
    3. you get it...


    Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.

    • Device:
    • Operating System:
    • Browser and Version:

    Failure Logs

    Please include any relevant log snippets or files here. To use the Editor ( 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:

    Material Dashboard PRO Laravel by Creative Tim @if (auth()->check() && !in_array(request()->route()->getName(), ['welcome', 'page.pricing', 'page.lock', 'page.error'])) @include('layouts.page_templates.auth') @else @include('layouts.page_templates.guest') @endif
    @stack('scripts') @stack('js')

    My app.js looks like this: require('./bootstrap');

    And my bootsrap.js looks like this: window._ = require('lodash');


    • We'll load jQuery and the Bootstrap jQuery plugin which provides support
    • for JavaScript based Bootstrap features such as modals and tabs. This
    • code may be modified to fit the specific needs of your application. */

    try { window.Popper = require('popper.js').default; window.$ = window.jQuery = require('jquery');


    } catch (e) {}


    • We'll load the axios HTTP library which allows us to easily issue requests
    • to our Laravel back-end. This library automatically handles sending the
    • CSRF token as a header based on the value of the "XSRF" token cookie. */

    window.axios = require('axios');

    window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';


    • Echo exposes an expressive API for subscribing to channels and listening
    • for events that are broadcast by Laravel. Echo and event broadcasting
    • allows your team to easily build robust real-time web applications. */

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

  • 8

    npm install WARN deprecated [email protected]: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1


    Please answer the following questions for yourself before submitting an issue.

    • [ Yes, Material Dashboard Pro - v2.1.0 ] I am running the latest version
    • [ No ] I checked the documentation and found no answer
    • [ Yes ] I checked to make sure that this issue has not already been filed
    • [ Yes ] I'm reporting the issue to the correct repository (for multi-repository projects)

    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]

  • 9


    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.

  • 10

    Include data validation and text editor plugins


    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 css and js code to fit in with material design principles. And also edit the jquery validation plugin js fetched from 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.

  • 11


    Hi! I have an issue with a checkbox. It works only twice. 8a43ea8b20981bdea67c51b82d098e4d 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:

        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="/Scripts/jquery-3.1.0.js"></script>
    <script src="/Scripts/jquery-ui-1.9.0.js"></script>
        <script src="/Scripts/moment.js"></script>
    <script src="/Scripts/bootstrap.js"></script>
    <script src="/Scripts/respond.js"></script>
        <script src="/Scripts/bootstrap-datetimepicker.js"></script>
        <link href="/Content/bootstrap.css" rel="stylesheet"/>
        <link href="/Content/bootstrap-datetimepicker.css" rel="stylesheet"/>
        <script src="/Scripts/bootstrap-select.js"></script>
        <script src="/Scripts/material-dashboard/material.min.js"></script>
    <script src="/Scripts/material-dashboard/bootstrap-notify.js"></script>
    <script src="/Scripts/material-dashboard/bootstrap-checkbox-radio.js"></script>
    <script src="/Scripts/material-dashboard/material-dashboard.js"></script>
        <script src="/Scripts/modernizr-2.6.2.js"></script>
        <link href="/Content/Site.css" rel="stylesheet"/>
        <script src="/Scripts/cvpr/FileUploadHelper.js"></script>
    <script src="/Scripts/cvpr/GeneralSettings.js"></script>
    <script src="/Scripts/cvpr/Sessions.js"></script>
    <script src="/Scripts/cvpr/Speakers.js"></script>
        <link href="/Content/bootstrap-select.css" rel="stylesheet"/>
        <link href="/Content/material-dashboard/material-dashboard.css" rel="stylesheet"/>
        <!--Icons, list is here: -->
        <link href="" rel="stylesheet">

    I work with ASP.NET, so this is the way I use a checkbox:

    <div class="form-group">
                <div class="checkbox col-md-offset-2 col-lg-offset-2">
                    <label class="control-label">
                        @Html.CheckBoxFor(model => model.IsHidden) Is Hidden
                    @Html.ValidationMessageFor(model => model.IsHidden, "", new { @class = "text-danger" })

    Please, help me to fix the issue.

  • 12

    [Feature Request] Documentation Datatable AJAX/fetch Request

    What is your enhancement?


    I've suscribe Pro subcription, and I've problem for use simpledatatable with Ajax and Fetch request in Jquery. Can you help me ?

  • 13

    [Bug] Template does not work



    Reproduction link

    Operating System




    Browser & Version


    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.


    Buy a different template

    Additional comments

  • 14

    [Bug] TypeError: Cannot convert object to primitive value



    Reproduction link

    Operating System



    PC and Mobile

    Browser & Version

    All Browsers

    Steps to reproduce

    1. Create a site using material design
    2. Try to add JS9:
    3. add static files. refer to 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 opened


    chanhed this line: if (!i && l.toggle && /show|hide/.test(t) && (l.toggle = !1), i || (i = new r(this, l),, i)), 'string' == typeof t) {

    to this: if (!i && l.toggle && /show|hide/.test(l) && (l.toggle = !1), i || (i = new r(this, l),, i)), 'string' == typeof t) {

    Additional comments

    Unfortunately my code is not in production. So I cannot create a codepen etc...

  • 15

    [Bug] referenceButtons creates errors when undefined



    Reproduction link

    Operating System




    Browser & Version

    Chrome Version 97.0.4692.99

    Steps to reproduce

    ReferenceButtons is not always defined, See

    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.


    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.

  • 16

    [Bug] not working with node 16



    Reproduction link

    Operating System




    Browser & Version


    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: *** [ Release/] 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.log


    looks like to old version of node-sass is used by gyp

    Additional comments