Worldwide Creative Tim Meetups ❤️Give us a helping hand to make it happen!

Material Dashboard React

Material Dashboard React

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

MIT License

68,685 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

jasonkjl72
  • downloaded
1 year ago

Hey @einazare, I've tried out the demo app; how can I add a new page to the app without adding a menu item on the left sidebar menu? Thanks

einazare
  • owner

Hello again @jasonkjl72 . Please check our live documentation for this issue: https://demos.creative-tim.com/material-dashboard-react/#/documentation/routing-system . Best, Manu
1 year ago

pranavpanchal
  • downloaded
1 year ago

Hey @einazare, I was wondering which file to edit for the routes so that the routes are only available if a user is authenticated (firebase.auth().currentUser).

einazare
  • owner

Hello @pranavpanchal and thank you for your interest in using our products. What i would do, is i would redirect the user to the login page if the user would not be logged in. Here is the official docs on redirect of react-router. https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Redirect.md#redirect . The very first example is what i would do. Hope this will help you. Best, Manu.
1 year ago

kemardly
  • downloaded
1 year ago

Hi when I run npm start I found error like this Module not found: Can't resolve 'assets/css/material-dashboard-react.css?v=1.3.0' after that I set path in index.js to ./assets/css/material-dashboard-react.css?v=1.3.0 then this error occur Module not found: Can't resolve 'components/Card/Card.jsx' how to fix this I love your theme

einazare
  • owner

Hello @kemardly and thank you for your interest in using our product. Please read our live docs: https://demos.creative-tim.com/material-dashboard-react/#/documentation/tutorial . Best, Manu.
1 year ago

kemardly
  • downloaded

My script is like this it seem old version so I can't follow your link. Have you other solution. My script is "start": "node scripts/start.js",
1 year ago

kemardly
  • downloaded

thanks I solve it https://github.com/creativetimofficial/light-bootstrap-dashboard-react/issues/4
1 year ago

shezanazi
  • downloaded
1 year ago

@einazare Sorry for the late reply, as I was on holiday. I have it up and running now, however on heroku my env variables are not found. Is there something I need to setup?

shezanazi
  • downloaded

solved. The variables need to start with REACT_APP_
1 year ago

mohamedyassersayed
  • downloaded
1 year ago

I can not install it i need help please

einazare
  • owner

Hello @mohamedyassersayed and thank you for your interest in using our products. Please read our live docs: https://demos.creative-tim.com/material-dashboard-react/#/documentation/tutorial . Best, Manu.
1 year ago

mohamedyassersayed
  • downloaded

Thanks for the reply but I wanted you to dial it HTML or php
1 year ago

einazare
  • owner

Hello there again @mohamedyassersayed . We have a HTML version here: https://www.creative-tim.com/product/material-dashboard . Best, Manu.
1 year ago

mohamedyassersayed
  • downloaded

Thank
1 year ago

prasannapokharel
  • downloaded
1 year ago

Hi, Thank you for this awesome product. I just wanted to do some tweak but ain't able to. I want dashboard to be "public" but "user profile" to be private. So when user clicks at dashboard show him dashboard but when he clicks at user profile show him user profile if he is logged in else a small login component (not complete redirect to a login screen). Some thing like the following pseudocode. I will handle the firebase login. <Router history={this.hist}> <Switch> {indexRoutes.map((prop, key) => { if (prop.component == "UserProfile") {return <Route path={prop.path} component={SignIn} key={key} />;} else {return <Route path={prop.path} component={prop.component} key={key} />}; })} </Switch> </Router> How and where should I pass the props that user is logged in ? Thanks in advance.

einazare
  • owner

Hello there @prasannapokharel and thank you for your interest in using our products. What i would do, is i would redirect the user to the login page if the user would not be logged in. Here is the official docs on redirect of react-router. https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Redirect.md#redirect . The very first example is what i would do. Hope this will help you. Best, Manu.
1 year ago

sloveez
  • downloaded
1 year ago

Hello and thank you for your hard work on this! I am trying to create my own "Card"-based component (just like on the Dashboard home with the icon). I'm deriving my component from React.Component. Functionally, everything is fine. However, this.props does not contain the parent classes for the correct styling. I think I'm just doing something wrong and it's probably not a bug. Any help would be appreciated!

einazare
  • owner

Hello @sloveez . Thank you for your interest in working with our products. Can you please open an issue here: https://github.com/creativetimofficial/material-dashboard-react/issues ? Since our platform does not support markdown inside the comments, we would have difficulties in understanding each other. This part here, the comments on our platform, should be used when there is a non-code related problem, once again, because of the markdown. Best, Manu.
1 year ago

alohia
  • downloaded
1 year ago

Hey! I just wanted to confirm that this Material Dashboard with the PSD will include Sketch files as well. I'm curious as you have not mentioned this in your description anywhere but I do see comments mentioning it.

einazare
  • owner

Hello there @alohia . Thank you for your interest in using our product. Since this is a FREE product, a freebie, it does not include PSD or Sketch files. Are you talking about the PRO one: https://www.creative-tim.com/product/material-dashboard-pro-react? If so, than i am afraid that the answer is no. It only has PSD files. Hope this information was helpful. Best, Manu.
1 year ago

felixaniel
  • downloaded
1 year ago

Hello, @einazare. Could you please give me some details about the improvements included in the pro version of this template? For example, I would like to know if data tables are more complete. Greets.

einazare
  • owner

Hello there @felixaniel . Thank you for your interest in working with out products. Well, the main difference is in the pages that you get (you get login, register, lock-screen pages for example), there are more props on almost all of our components, the number of components and plugins used is a bit larger, but to be quite frankly, I think the best way to see what the differences there are, you could take a look at both of the products live previews: https://demos.creative-tim.com/material-dashboard-react/#/dashboard <<and>> https://demos.creative-tim.com/material-dashboard-pro-react/#/dashboard . And the most important, you should read both of their documentation: https://demos.creative-tim.com/material-dashboard-react/#/documentation/tutorial <<and>> https://demos.creative-tim.com/material-dashboard-pro-react/#/documentation/tutorial . On both of these docs, in the left menu, you will find our components, how to use them, and their props. I am not sure what do you mean by <<For example, I would like to know if data tables are more complete>> . If you would please details on what you are trying to say here, I will give my best to give you an answer. Best, Manu.
1 year ago

felixaniel
  • downloaded

Ok, thanks, @einazare. The PRO version demo application you shared with me has exactly what I was looking for. I wanted to know if data tables include more functionality in the PRO version, and they do. Thanks!
1 year ago

alanooper
  • downloaded
1 year ago

I have a question similar @pranavpanchal answered by @einazare. I am using Material Dashboard React Pro 1.4.0 I have redirected the user to the login / Registration page by default. 1. I edited routes/index.jsx and changed: From:{ path: "/", name: "Home", component: Dashboard } To: { path: "/", name: "Home", component: Pages } 2. The Pages header comes up, I click Login and ger redirected to the correct url: http://localhost:3000/pages/login-page 3. I modified views/Pages/LoginPage.jsx render() and after successful login (I get an oAuth2 token from my backend), const { redirect } = this.state; if (redirect) { return(<Redirect from='/' to='/dashboard'/>); } else { return ( your original code) } 4. The redirect works. the Dashboard id completely visible with the following url: http://localhost:3000/dashboard 5. Issue; Click "Widgets" in the sidebar. The URL displays http://localhost:3000/widgets however the GUI shows the Pages Header and login behaving as if it redirected to http://localhost:3000/

einazare
  • owner

Hello there @alanooper . I think you've maybe did not change the whole routing system as you should. I've made some updates a few weeks ago in our live docs. <<https://demos.creative-tim.com/material-dashboard-pro-react/#/documentation/routing-system>> There is a notice here about what your problem might be. Best, Manu.
1 year ago

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