500,000 web developers are using our UI Kits & Admin Dashboards ❤️ And of course that we want to celebrate our success with YOU!

Material Dashboard React

Free Material-UI Admin Template
· 4.80/5 (172 Reviews)

MIT License

27,085 Downloads
110 Comments
Regular Support
Lifetime Updates
Release: 6 months ago
Update: 11 days ago

30 Handcrafted Components

2 Customized Plugins

7 Example Pages

Product certified by: Creative Tim

Upgrade to PRO Version

Get more power with Material Dashboard Pro React. It has a lot more features compared to the free version. We hope you will create awesome websites/templates with this product!

What is in Demo?
  • Components · 30
  • Plugins · 2
  • Examples Pages · 7
  • -
  • -
  • -
What is in PRO Version?
  • Components · 200
  • Plugins · 10
  • Example Pages · 28
  • + Documentation
  • + SASS Files
  • + Photoshop Files
Upgrade to PRO

We are here to help you!

110 Web Developers commented on this product

Report issue

eusourafael
  • downloaded
1 month ago

Hi all, Did someone manage to fix the Module not found: Can't resolve 'assets/css/material-dashboard-react.css?v=1.3.0' problem? I already follow the documentation tutorial (install cross-env, change start script, create a new react app) but could not manage to fix it.

einazare
  • owner

Hello @eusourafael and thank you for your interest in using our product. Could you please tell us on what machine are you having this issue (Mac, Windows, Ubuntu etc.)? And also, what browser do you use? What versions of NodeJs and npm are you using? Could you please try installing the latest ones? Best, Manu.
1 month ago

owlswift_199x
  • downloaded

Hi, I downloaded and experienced the same issue. I tried to run the codes on CodeSanbox.io on MacBook Air and I've also got the latest versions of NodeJs and npm
1 month ago

einazare
  • owner

Hello @owlswift_199x and thank you for your interest in using our product. I do not know what do you mean by "I tried to run the codes on CodeSanbox.io on MacBook Air", from what i know CodeSanbox is an online editor, and i am not sure how you would run our project on that. So my question is, have you tried <<npm install && npm start>> from your terminal and see if the project starts on your local machine? Also, have you tried the fix from our live docs? Best, Manu.
1 month ago

owlswift_199x
  • downloaded

Hi @eniazare i successfully got it run from my local machine. Thanks so much for your help!
1 month ago

crambelsoupy
  • downloaded
1 month ago

Hi, I can't seem to run, using nodejs v4.2.6 I get the following:

crambelsoupy
  • downloaded
1 month ago

Sorry, bad internet. I get: /home/crambelsoupy/Src/react-demo/node_modules/react-scripts/scripts/start.js:31 const { ^ SyntaxError: Unexpected token { at exports.runInThisContext (vm.js:53:16) at Module._compile (module.js:374:25) at Object.Module._extensions..js (module.js:417:10) at Module.load (module.js:344:32) at Function.Module._load (module.js:301:12) at Function.Module.runMain (module.js:442:10) at startup (node.js:136:18) at node.js:966:3 npm ERR! Linux 4.13.0-45-generic npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "start" npm ERR! node v4.2.6 npm ERR! npm v3.5.2 npm ERR! code ELIFECYCLE npm ERR! [email protected] start: `react-scripts start` npm ERR! Exit status 1

einazare
  • owner

Hello @crambelsoupy and thank you for your interest in using our product. Please update your NodeJs (https://nodejs.org/en/) and your npm and try again starting the proect. Best, Manu.
1 month ago

dipannoyasupta 1 month ago

Having Trouble understanding your project structure......... I have created a folder in views directory and created a file named crd.jsx.Then I have added following url object in dashboardRoutes array { path: "/card", sidebarName: "cardexample", navbarName: "Material Card", icon: Dashboard, component: CardBasic1 }, my crd.jsx ----------------------------------------- import React from "react"; // @material-ui/core components import PropTypes from "prop-types"; import withStyles from "@material-ui/core/styles/withStyles"; // core components import Button from "components/CustomButtons/Button.jsx"; import Card from "components/Card/Card.jsx"; import CardBody from "components/Card/CardBody.jsx"; import cardImagesStyles from "assets/jss/material-dashboard-react/cardImagesStyles.jsx"; class CardBasic1 extends React.Component { render() { const { classes } = this.props; return ( <Card style={{ width: "20rem" }}> <img className={classes.cardImgTop} data-src="holder.js/100px180/" alt="100%x180" style={{ height: "180px", width: "100%", display: "block" }} src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22320%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_163df23d717%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A16pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_163df23d717%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22119.0859375%22%20y%3D%2297.35%22%3E320x180%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-holder-rendered="true" /> <CardBody> <h4>Card title</h4> <p> Some quick example text to build on the card title and make up the bulk of the card's content. </p> <Button color="primary">Go somewhere</Button> </CardBody> </Card> ); } } CardBasic1.propTypes = { classes: PropTypes.object.isRequired }; export default withStyles(cardImagesStyles)(CardBasic1); after going to the url I am also getting the vertical navbar , search option ,notification icon.But i am not understanding why r they appearing.....In my crd.jsx which function is responsible for loading these components....

einazare
  • owner

Hello @dipannoyasupta and thank you for your interest in working with our products. Could you please open a github issue here: https://github.com/creativetimofficial/material-dashboard-react/issues with the right code format, i really do not understand what you have wrote above :( . Best, Manu.
1 month ago

dipannoyasupta

Thanks a lot @einazare.I have submitted my issue in your provided link .Please , help me to understand your code structure.........
1 month ago

eozbayirtibat
  • downloaded
22 days ago

How can I create webpack. Do you have a webpack.config.js file

einazare
  • owner

Hello @eozbayirtibat and thank you for your interest in using our product. No, this package does not have webpack.config.js since it was made using create-react-app. Best, Manu.
21 days ago

pranavpanchal
  • downloaded
19 days ago

Can someone help me figure out how I can make an AuthPage (Login/Register), the landing page? I want it to so that you can only enter the dashboard once you're logged in. I am just confused on how to route that. (I am actually sort of confused with the routing in this project in general because I usually use a Switch statement in app.js and setup the routes.)

einazare
  • owner

Hello @pranavpanchal and thank you for your interest in using our product. I am sory for this late response, we've had a small vacation last week. What you are looking for was made by us in the PRO version of this product here: https://www.creative-tim.com/product/material-dashboard-pro-react . Best, Manu.
14 days ago

pranavpanchal
  • downloaded

Thanks for the reply, Manu. Currently, I am using this to test out a project. Therefore, I will be upgrading to Pro after. For now, I have created an authentication page in views called AuthPage.jsx. However, I just need help with the routing. I want to know how to set the AuthPage.jsx view to the root route "/" instead of Dashboard.jsx.
14 days ago

einazare
  • owner

Does the documentation on our routing system help you (https://demos.creative-tim.com/material-dashboard-react/#/documentation/routing-system) ? Best, Manu.
13 days ago

oscar.sidel
  • downloaded
18 days ago

Thanks! How can I put the button drawer and the sidenav appear to the left on movile? In this moment appear to the right. Thanks again!

einazare
  • owner

Hello @oscar.sidel and thank you for your interest in using our product. I am sory for this late response, we've had a small vacation last week. For this you need to make a lot of changes, first of all go in src/components/Sidebar/Sidebar.jsx and change line 85 to anchor="left", from anchor="right". After that inside src/assets/jss/material-dashboard-react/components/sidebarStyle.jsx delete line left: "auto", (37) . Best, Manu.
14 days ago

danielusev
  • downloaded
17 days ago

Hi, After I've download / clone Following all the steps in Getting started section I've got : Failed to compile ./node_modules/@material-ui/core/ButtonBase/TouchRipple.js Module not found: Can't resolve '@babel/runtime/helpers/builtin/assertThisInitialized' in '/Users/daniel.rusev/Downloads/material-kit-react-v1.1.0/node_modules/@material-ui/core/ButtonBase' This error occurred during the build time and cannot be dismissed. Can you help me with it ?

edrus
  • downloaded

Same here.
17 days ago

marshallacobs12
  • downloaded

same here
17 days ago

huangwp1988
  • downloaded

I have encountered the same issue, solved by the following commands, you can have a try: # npm uninstall --save-dev @babel/runtime # npm install --save-dev @babel/[email protected] # wget http://www.tiepnguyen.com/dev/elite/node_modules/@babel/runtime/helpers/assertThisInitialized.js -O node_modules/babel-runtime/helpers/assertThisInitialized.js
15 days ago

einazare
  • owner

Hello guys, is this an issue with this product or with this one here: https://www.creative-tim.com/product/material-kit-react ? Because the error states material-kit-react, and not material-dashboard-react. Best, Manu.
14 days ago

spartanhero93
  • downloaded

huangwp1988 thank you this solved my problem as well. (material-dashboard-react-v1.4.0 __free-version)
13 days ago

idel.technovice
  • downloaded
15 days ago

Hey ! Thank you a lot for your beautiful content ! I have a little problem while using material dashboard with material kit. How ca I use both of them properly ?

einazare
  • owner

Hello @idel.technovice and thank you for your interest in using our product. I am sory for this late response, we've had a small vacation last week. Here is a quick presentation on how to use the products: 1. The Dashboard should be used for the Admin/CMS part of your website/startup. Here is where you control everything from the management part, where you see stats like this: https://demos.creative-tim.com/material... about your products/users, where you edit/add/delete: https://demos.creative-tim.com/material... different items, etc. This is the control panel of your site. The Dashboard also includes the Login Page (https://demos.creative-tim.com/material...), Register Page (https://demos.creative-tim.com/material...) or Lock Screen Page (https://demos.creative-tim.com/material...) so you can use them to have the access to the Dashboard. 2. The UI Kit should be used for the part where you present your business. You can create with the kit the Landing Page (https://demos.creative-tim.com/material...) of your startup/website, the Contact Us Page (http://demos.creative-tim.com/material...) the Pricing Page (https://demos.creative-tim.com/material...) the About Us Page (https://demos.creative-tim.com/material...) etc. Or you can use this to create also your Blog (https://demos.creative-tim.com/material...), where you will keep in touch with your audience. You can also built your own pages with already made sections -> https://demos.creative-tim.com/material... . If you create a SaaS, probably your users will have access to the Dashboard too, so they can control some items from there too. But you still need the UI kit for the presentation pages of your business. In this way you will have the same design in the presentation and also in the Dashboard. The basic idea is that you should keep the products separate and not try to combine them because you will load your page with too much CSS and Javascript which are not necessary in the same time. Your user will be either on a Landing Page, or on the Admin Part. If you like for example 1 item from one product, like a Card, and it is not in the other product, you can check in the next example how to do that using the SCSS and JSS files. Just follow the next steps, for the FileUpload Example: 1. You can go to material-kit-pro-react/src/assets/scss/core/_fileupload.scss and put it in the material-dashboard-pro-react/src/assets/scss/material-dashboard-pro-react/_fileupload.scss folder. 2. Add the following line inside src/assets/scss/material-dashboard-pro-react.scss : @import "material-dashboard-pro-react/fileupload"; at the end of it. Please let us know if we can help you with anything else. Best, Manu.
14 days ago

shezanazi
  • downloaded
14 days ago

I can run my app locally. However on heroku it says: ./src/index.js Module not found: Can't resolve 'assets/scss/now-ui-dashboard.css' in '/app/src'

einazare
  • owner

Hello @shezanazi and thank you for your interest in using our product. I am sorry for this late response, we've had a small vacation last week. Change the start script to "start": "NODE_PATH=./src react-scripts start", and the build script to "build": "NODE_PATH=./src react-scripts build", . Best, Manu.
14 days ago

shezanazi
  • downloaded

Thanks @einazare I applied the changes. When running "npm run start" it now says 'Command "NODE PATH" not found".
14 days ago

einazare
  • owner

Hello again @shezanazi . Maybe i was a bit hasty in my other comment. Can you please tell if you have read this tutorial on how to deploy on heroku: https://blog.heroku.com/deploying-react-with-zero-configuration ? Also, now i've read a bit better what you've initially have written, and i am seeing that the error states "now-ui-dashboard" instead of "material-dashboard-react". Can you please tell me which product are you trying to deploy? Best, Manu.
13 days ago

You have to be logged in to post a comment. Login here.

Why our customers appreciate us

Design Quality

Design Quality

Go Pro after use this 10/10

Design Quality

very nice