Material Dashboard React

Let's get to know each other! Take our developer survey, opened to coders everywhere! ๐Ÿ™๐Ÿป

Material Dashboard React

Free Material-ui Admin Template
· 4.90/5 (292 Reviews)

MIT License

54,221 Downloads
186 Comments
Community Support
6 months Updates
Release: 1 year ago
Update: 3 months 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 · 8
  • + Documentation
  • + SASS Files
  • + Photoshop Files
  • + Sketch Files
Upgrade to PRO

We are here to help you!

186 Web Developers commented on this product

Github Docs FAQ Page

eusourafael
  • downloaded
10 months 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.
10 months 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
10 months 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.
10 months ago

owlswift_199x
  • downloaded

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

crambelsoupy
  • downloaded
10 months ago

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

crambelsoupy
  • downloaded
10 months 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.
10 months ago

dipannoyasupta 10 months 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.
10 months ago

dipannoyasupta

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

eozbayirtibat
  • downloaded
9 months 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.
9 months ago

pranavpanchal
  • downloaded
9 months 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.
9 months 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.
9 months 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.
9 months ago

oscar.sidel
  • downloaded
9 months 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.
9 months ago

danielusev
  • downloaded
9 months 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.
9 months ago

marshallacobs12
  • downloaded

same here
9 months ago

spartanhero93
  • downloaded

huangwp1988 thank you this solved my problem as well. (material-dashboard-react-v1.4.0 __free-version)
9 months 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
9 months 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.
9 months ago

levicash
  • downloaded

huangwp1988 : 666
2 months ago

levicash
  • downloaded

@huangwp1988 666
2 months ago

idel.technovice
  • downloaded
9 months 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.
9 months ago

shezanazi
  • downloaded
9 months 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.
9 months ago

shezanazi
  • downloaded

Thanks @einazare I applied the changes. When running "npm run start" it now says 'Command "NODE PATH" not found".
9 months 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.
9 months ago

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