Do you need Angular, React, Vuejs or HTML? For the next days, you can get our awesome Bundles with 70% discount! ๐Ÿ”ฅ

Material Dashboard React

Material Dashboard React

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

MIT License

63,436 Downloads
194 Comments
Community Support
6 months Updates
Release: 1 year ago
Update: 2 months 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!

194 Web Developers commented on this product

Github Docs FAQ Page

parthsoni
  • downloaded
1 year ago

I am getting this error ./src/index.js Module not found: Can't resolve 'assets/css/material-dashboard-react.css'

einazare
  • owner

Hello @parthsoni and thank you for your interest in working with our products. You can resolve this by 1.Change NODE_PATH=src to NODE_PATH=./src inside .env file. or 2. Change react-scripts start to cross-env NODE_PATH=./src react-scripts start inside package.json. This second option would require cross-env to be installed globally. Best, Manu.
1 year ago

sheme
  • downloaded

I've the same problem, can someone show me how to change the node path ? I tried but I 'don't know how to write it in the file you mentioned :/
1 year ago

einazare
  • owner

Hello @sheme . Can you please detail what of the above comment you do not understand?
1 year ago

sheme
  • downloaded

Sorry, I just find out :) thx
1 year ago

kevaladhiya
  • downloaded
1 year ago

i am not able to get html file

einazare
  • owner

Hello @kevaladhiya , and thank you for your interest in our product. This is a React project, so you will have only on html file in whole project, the rest is pure React (framework over javascript). Here is a link (https://creativetimofficial.github.io/material-dashboard-react/#/documentation/tutorial) with the quick start up. I will not be able to respond to your further questions until 3rd of April 2018. Thank you for your understanding. Best, Manu
1 year ago

cismat
  • downloaded
1 year ago

It is very good, thank you :-)

oceanear
  • downloaded
1 year ago

Thanks for sharing. I want to use metadata in each URL for sharing on Facebook but I can not how to do it. (https://developers.facebook.com/tools/debug/sharing/) Example: If I share post on Facebook just as https://creativetimofficial.github.io/material-dashboard-react/#/user?id=1 ,the Link Preview title is "Well come Ocean" If I share post on Facebook just as https://creativetimofficial.github.io/material-dashboard-react/#/user?id=2 ,the Link Preview title is "Well come Moutain" Metadata will change in src/views/UserProfile.jsx for each input. Thanks for your help...

einazare
  • owner

Hello @oceanear and thank you for your interest in using our product. I am not sure if i fully understand what you want. If i understood correctly, than you want to add some sort of button or action to your project on which if the user presses or does that action, you want him to be redirected to facebook so he can share or post something which has information about him. The problem with this is that React is a one page application, which means that it only uses on HTML page. From what i know, you need to add some tags with the metadata in the <head>...</head> section of that single HTML page. Obviously you can change those information from the head section using javascript with DOM manipulation in your component. We can not help you with the metadata, due to the fact that, if i am correctly, you get those information from facebook. Hope that information helps you. Please let us know if we can help you with anything else. Best, Manu.
1 year ago

oceanear
  • downloaded

Thank you for your good reply that I need. I think I will find how to render data from server before send HTML to client. It will change metadata in header before Facebook fetch it to get Link Preview. Thank you very much!!! :-)
1 year ago

surya.kumaran
  • downloaded
1 year ago

How to migrate this project to the create-react-app

einazare
  • owner

Hello @surya.kumaran , and thank you for your interest in using our product. This product was made using creat-react-app. Best, Manu.
1 year ago

surya.kumaran
  • downloaded
1 year ago

is there an npm install available ?

einazare
  • owner

@surya.kumaran , yes, there is a npm install availible. Please follow the documentation here to get started https://creativetimofficial.github.io/material-dashboard-react/#/documentation/tutorial . Best, Manu.
1 year ago

ismailkhan93
  • downloaded
1 year ago

Hi @ @einazare , I'm struggling to deploy even the free version of this template. I wanted to experiment with the free version before I purchased the Pro version, but I'm stuck on the free version so far :( Here are the steps: 1) Download the template, unzip folder 2) Run npm install 3) Run npm start --> everything works fine 4) Run npm run build. This creates a build folder. 5) Deploy build folder to Firebase Hosting. 6) When I navigate to the URL I deployed to, I see the following error: "Uncaught SyntaxError: Unexpected token <": main.2eeed198.js:1 What's weird is that the linked JS file is not a JS file but actually an HTML file. Any idea how to fix it? I haven't made any modifications, this is all on the basic template!

einazare
  • owner

Hello @ismailkhan93 and thank you for your interest in using our product. Our team has not worked yet with firebase, we've only worked with github pages and heroku. I've done some quick search on the internet and found numerous tutorials on how to deploy react app to firebase. From my previous searches (searches product related), i've seen that tutorials from medium.com usually are good to follow, so i'm going to give you a tutorial from medium (once again, there are a lot of other tutorials): https://medium.com/@bensigo/hosting-your-react-app-with-firebase-hosting-add1fa08c214 (the firebase stuff is right at the end (search for "woo , almost") and start reading from there. Because today is Sunday, i am not at my desk to verify if this would work, so i'm going to wait for your response to see if everything works now. Best, Manu.
1 year ago

amoranod88
  • downloaded
1 year ago

Celebrate Easter with our Egg-cellent Premium Products! Get any product you want with 35% discount ๐Ÿฐ

kevinugts
  • downloaded
1 year ago

Hi Einazare, Currently i am figuring how the navigation could be better or how it even works. You are mapping the appRoutes array to a new array with Routes. Secondly you are rendering the full array in the classes.content <div>. Could you explain me how this works? Because I am not getting the point of mapping through the array and then render the full array in the App.jsx (see screenshot). https://ibb.co/mXDGWc

kevinugts
  • downloaded

Besides that when I remove the switch from react router nothing changes.
1 year ago

kevinugts
  • downloaded

And another thing is: why do you make an array of your indexRoutes? There is only 1 index route, so there shouldn't be a need for making an array for that.
1 year ago

einazare
  • owner

Hello again @kevinugts , i think you have made changes in our code, because my code doesn't look like yours. We've made this because we were rendering the routes twice, and this was done because of on the map page we didn't want to render the routes inside the classes.content. You can download again our product and see what i am talking about. You can move the map directly in the render method if you don't need this. If you don't understand, don't hesitate to ask me. Best, Manu.
1 year ago

einazare
  • owner

What do you mean by "when I remove the switch from react router nothing changes"? It works if you delete the switch? It doesn't? Anyway, i've made it like this inspired by the at that time documentation of react-router-dom. The array we are making with the indexRoutes is that because there we kind of setting our layout, and if you want to make your own layout, you can add there a route and you'll have a new layout. Makes sense? Here is the link to our documentation on our routing system: https://creativetimofficial.github.io/material-dashboard-react/#/documentation/routing-system. Best, Manu.
1 year ago

kevinugts
  • downloaded

@einazare Hi Manu, Please see https://ibb.co/dJzq7H The same principal is happening over there. Why are we mapping over the appRoutes and making a new array containing Routes which is rendered in the classes.container <div> ? Can you explain me in detail how it works?
1 year ago

kevinugts
  • downloaded

@einazare When I remove the switch from the const switchRoutes = // <Switch> appRoutes.map((prop, key) => { if (prop.redirect) return <Redirect from={prop.path} to={prop.to} key={key} />; return <Route path={prop.path} component={prop.component} key={key} />; }); // </Switch> The Switch doesn't have any function here. When I remove it it still has the same behaviour.
1 year ago

einazare
  • owner

So, for the "https://ibb.co/dJzq7H". This is just so that we do not write two times the mapping over the routes. We put the routes in a variable and we render it twice. It is like a rule in OOP to not have duplicate code. I'm not sure how much details i can give on this matter. It is just so the code looks clean, it doesn't have a special functionality. The issue with the <Switch>. I put the </Switch> there because of a tutorial i've followed when i've started to learn React. I've seen this in multiple projects/tutorials and decided to go this way with the products i'm working on. Hope that information helps you. Best, Manu.
1 year ago

jasvinderingh
  • downloaded
1 year ago

Hi, when I run npm start, I get the error "Module not found: Can't resolve 'variables/charts' in 'C:\Users\Asus\Desktop\BT3103\material-dashboard-react-v1.1.0\src\views\Dashboard'"

einazare
  • owner

Hello @jasvinderingh and thank you for your interest in using our product. I've just downloaded the dashboard and it works just fine after npm install && npm start, no errors given. You can try solve this issue by either 1) changeing NODE_PATH=src to NODE_PATH=./src inside .env file or 2) installing cross-env globally and changeing react-scripts start to cross-env NODE_PATH=./src react-scripts start inside package.json. Best, Manu.
1 year ago

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