Interested in all of our Premium Products? Get our Awesome Bundles with discounts up to 70%! ๐Ÿ”ฅ๐Ÿ”ฅ๐Ÿ”ฅ

Material Dashboard React

Material Dashboard React

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

MIT License

69,015 Downloads
202 Comments
Community Support
6 months Updates
Release: 1 year ago
Update: 1 month ago

30 Handcrafted Elements

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?
  • Elements · 30
  • Plugins · 2
  • Examples Pages · 7
  • -
  • -
  • -
  • -
What is in PRO Version?
  • Elements · 200
  • Plugins · 10
  • Example Pages · 8
  • + Documentation
  • + SASS Files
  • + Photoshop Files
  • + Sketch Files
Upgrade to PRO

We are here to help you!

202 Web Developers commented on this product

Github Docs FAQ Page

daniloerida
  • downloaded
1 year ago

Thanks for share your project, it's amazing!!!!

jade_drgaon
  • downloaded
1 year ago

How can I combine this template with a login form? I replaced the <Router><Switch> with <BrowserRouter><div> in src/index.jsx to deal with auth redirect. (because I cannot find a way to solve auth redirect with Switch). Now I can redirect to dashboard after login. But links to other cards such as table are all broken. I inspected the web page using react dev tool in chrome browser and found that the reason might be the dashboard can no longer update the route in the <Router><Switch> ...</Router></Switch> of the app. Would you please help me out? Thanks a lot.

einazare
  • owner

Hello @jade_drgaon and thank you for your interest in our product. I think you should make all the Routes in your index.js and make the route "/" to your login form. And after that make a redirect to your other routes, but i think is important that you render the routes before the login. Best, Manu.
1 year ago

vishnuprasad86728
  • downloaded
1 year ago

Thank you guys it's awesome.

dexusedia 1 year ago

ultimate we used it for our website purpose thanks tim for free support. SEO Company in jaipur.

joaomaciel
  • downloaded
1 year ago

The project build isn't working.... I use the command 'yarn buid' But when I tray to open the build/index.html, it just does not work...

einazare
  • owner

Hello @joaomaciel and thank you for your interest in our product. This is kind of strange, because what we have on the live preview is the build folder. I've run myself the build command and i see that it has some errors, it doesn't see some files. I will take a look and come back with a solution (if you deploy it somewhere, like github pages or heroku than it will work, on local it doesn't work because of that errors). Best, Manu.
1 year ago

kevinugts
  • downloaded
1 year ago

Hi, I've got this weird issue that an ListItem from material-ui turns into a div. I literally copied the Components from the sample project into mine but yours renders differently than mine. The problem is that the navigation on the left (blue background), is cut off. I'lll attach some photos to make it more clear: https://ibb.co/gJfFvn https://ibb.co/jqSvvn https://ibb.co/kJdPo7 https://ibb.co/iOfFvn Please let me know what I can do about this. Thanks

einazare
  • owner

I do not know what it is about, but we are going to take a look and come up with a css solution :D .
1 year ago

einazare
  • owner

Hello @kevinugts and thank you for your interest in our product. The links you have given doesn't work. I've seen that Material-UI has released the version 1.0.0-beta.33, while our product uses 1.0.0-beta.30, maybe you've upgraded to beta.33 and that could be the issue, but honestly without taking a look at your code i don't think i can be of use. You could open a issue here: https://github.com/creativetimofficial/material-dashboard-react/issues and maybe you could give me a small part of your code to understand better what happens. Best, Manu.
1 year ago

kevinugts
  • downloaded

@einazare Thanks for your quick reply mate. I can add you to my github repo if you would like. Just flick me your github username. Besides that, I am curious what the scrolling on mobile devices is so slow and laggy. Do you know why this is? Best Regards, Kevin.
1 year ago

einazare
  • owner

@kevinugts my github username is EINazare. As for the scrolling for mobile devices it could be caused by the way we import and export components and styles in our demo. You could try and change <<import {ComponentX, ComponentY, ...} from 'components';>> into <<import ComponentX from 'components/ComponentX/ComponentX';...>>. This could be one thing that could affect the scroll and make it lag. Another thing could be the size of the styles file and the fact that we export all the styles in it (like the src/components/index.js where we export all the components), a fix for this would be to move every style to it's component. We wanted to make an update last week with these, and some more changes, but we haven't had the time. I hope i'll have the time for these updates this week. Best, Manu.
1 year ago

kevinugts
  • downloaded

I will add you to my GitHub repo. Currently I am also have a major issue with this black transparent overlay which is caused when deleted the yarn lock file and installing all dependencies again. (not updating) Please briefly review this since it's a big pain in the ass. I am currently changing the way you've import the modules indeed, since it is causing a big bundle size. :) Anyway. Thanks for any help Manu. Best Regards, Kevin.
1 year ago

kevinugts
  • downloaded

Just added you to the github. Have a look and let me know if you could find the weird background overlay which was caused by reinstalling the node_modules with yarn install. :)
1 year ago

einazare
  • owner

@kevinugts i've took a look inside your project and i found the problem of that overlay, well actually not really a problem. It seems that you use material-ui-v1.0.0-beta.31 instead of material-ui-v1.0.0-beta.30. The guys from material-ui have changed some stuff from beta.30 to beta.31 and the drawer renders differently. You can deal with this issue by removing the dependency from beta.31 back to beta.30 ("material-ui": "1.0.0-beta.30",) or you can change inside the sidebar component the prop "type" to "variant" (type="temporary" to variant="temporary" and type="permanent" to variant="permanent"), but i would suggest to go with the first version because i do not know what other changes they've done from beta.30 to beta.3x. Best, Manu
1 year ago

einazare
  • owner

Yes, i tried it and worked fine. i'm noticing that you kept "^" in "^1.0.0-beta.30", this could be the problem (it could actually install beta.33 - but i'm not sure). When i tried it, i didn't put "^". Can you try it like this?
1 year ago

kevinugts
  • downloaded

@einazare I changed the "material-ui": "^1.0.0-beta.31" to "material-ui": "^1.0.0-beta.30" and run the script: yarn install. I removed the cache and restarted the server and it still not dissapear. :( Did you try it out yourself?
1 year ago

einazare
  • owner

@kevinugts you should also delete node_modules and make a clean install. Waiting to hear from you to see if everything is ok.
1 year ago

kevinugts
  • downloaded

It works fine now! Indeed I had to remove the node_modules folder. :) Btw just a quick tip: - The sidebar of this theme isn't correctly being rendered on iphone X. There is a gap for the safe zone on a iphone x. I tried to add view-port=cover and it did cover it but the css is not setup properly for this use case. Do you know what I can do about it>?
1 year ago

gratschultz2013
  • downloaded
1 year ago

I can't seem to figure out a lot about this dashboard. I can't even get the logo to change. No matter what I try, the logo stays as Creative Tim. Makes no sense.

einazare
  • owner

Hello again @gratschultz2013 . This problem could be because of your browser's cache. This issue has happened also to us. You can try using a different browser or delete your browser's cache. All the best, Manu.
1 year ago

jade_drgaon
  • downloaded
1 year ago

@einazare, thanks for your reply. I really like this template. If its pro version includes a login form I would certainly buy it. Before that, can you give me a brief example of route configure in this template so that the / path redirect to login form, and redirect back to / path after user authentication. Many thanks.

kevinugts
  • downloaded

@jade_drgaon I think you should create a new component that will handle this kind of situation. I think @einazare does know how to take care of this. :)
1 year ago

jade_drgaon
  • downloaded

@kevinugts thank you for your suggestion, I'll try on it.
1 year ago

einazare
  • owner

@jade_drgaon i would make a new component and after this i would make the index.js (src/index.jsx) to go to my new component with the login form. In this component i would render the login form if the authentication would not be done, and if the auth would be done (password and username for example would be correct) i would render the app container from our demo (src/containers/App/App.jsx). This means that our route from src/routes/index.jsx wouldn't point anymore to App component, would point to your new component for the login. I've took a look at this tutorial (https://auth0.com/blog/reactjs-authentication-tutorial/) maybe it will help you better (from what i've seen it's a bit different from what i've told you here). I really hope this information will help you. Best, Manu.
1 year ago

jade_drgaon
  • downloaded

@einazare It will be very attractive if this project includes a login form. Thank you for the tutorial link, but after I read its source code I found the tutorial also uses router instead of switch from its source code, which means it would face the same problem I've met when combining directly with this project(I can run the tutorial code, but the url is broken when I hit the login button. ). Actuallly, I've found a react login example(http://jasonwatmore.com/post/2017/09/16/react-redux-user-registration-and-login-tutorial-example) which works well on its own (and yes, it uses router instead of switch). I just can't integrate this example login code with your project. Before you complete the new version, I will continue to try along the direction you point out. Again, many thanks.
1 year ago

jade_drgaon
  • downloaded

@einazare It will be very attractive if this project includes a login form. Thank you for the tutorial link, but after I read its source code I found the tutorial also uses router instead of switch from its source code, which means it would face the same problem I've met when combining directly with this project(I can run the tutorial code, but the url is broken when I hit the login button. ). Actuallly, I've found a react login example(http://jasonwatmore.com/post/2017/09/16/react-redux-user-registration-and-login-tutorial-example) which works well on its own (and yes, it uses router instead of switch). I just can't integrate this example login code with your project. Before you complete the new version, I will continue to try along the direction you point out. Again, many thanks.
1 year ago

petertahinduka
  • downloaded
1 year ago

You can't imagine how much I have learnt in React with your help...the project I'm working on is meant to help me get a job and I cant wait to start paying for your services...THANK YOU.

einazare
  • owner

Hello @petertahinduka and thank you for your kind words. I hope you will get the job that you want. Best, Manu.
1 year ago

micheltlutz 1 year ago

Complicated to make the button for the side bar stay small in this free template too? is a useful feature. @creativetim

einazare
  • owner

Hello @micheltlutz and take you for your interest in our product. Could you be more specific with the problem? You want the buttons of the sidebar to be smaller? If you want, you can open an issue here: https://github.com/creativetimofficial/material-dashboard-react/issues . On that link you can upload images and videos with your problem so we can understand better. Best, Manu.
1 year ago

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