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

Material Dashboard Pro React

Material Dashboard Pro React

Premium Material-ui Admin
· 4.90/5 (159 Reviews)

License

2,472 Downloads
307 Comments
Premium Support
6 months Updates
Release: 1 year ago
Update: 1 month ago

200 Handcrafted Elements

10 Customized Plugins

8 Example Pages

Documentation

Fully Responsive

Product certified by: Creative Tim

Get Free Demo

Learn more about Material Dashboard Pro React in the light demo version. It has features from the full version. We hope you will like this introduction to 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
Get Free Demo

We are here to help you!

307 Web Developers commented on this product

Github Docs FAQ Page

jesusfdmadfactory 1 year ago

Hi all!, First, congratulations for this awesome theme, really it is good work :). I wonder what is the best way to protect all routes of the whole dashboard. I am using the LoginPage to allow accesss to authenticated users from my database. From this, the dashboard (route: "/") is loaded. However, I want to protect this to avoid access to not logged users (or with wrong login credentials). Thank you in advance for your support. Regards.

einazare
  • owner

Hello @jesusfdmadfactory 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

jesusontecha
  • downloaded

@einazare thank you for your response. I know what you suggest, however I don't see how to do it without changing much index.jsx and index.js code. Thank you.
1 year ago

jesusontecha
  • downloaded

@einazare I just solve this adding the Redirect block of code if there is no user-session token in Dashboard Component without changing nothing more :). Thank you!
1 year ago

einazare
  • owner

Hello again @jesusontecha , i am glad that everything works fine. Good luck in your app development. Best, Manu.
1 year ago

stanleyliu1006 1 year ago

@einazare Thanks for your response. That's very thorough. Will talk with my team and consider to buy the theme

einazare
  • owner

Hello again @stanleyliu1006 . Glad i could be of help. Best, Manu.
1 year ago

hitatek
  • downloaded
1 year ago

Hi @einazare , I wonder what PSD files include exactly? Are they icons? What can't I do if I don't have them? Can you explain please? Thanks.

einazare
  • owner

Hello @hitatek and thank you for your interest in using our product. The PSD files include the project (what you see in our live preview - without the customization component - the sidebar filters etc. component on the right), but instead of being code, is PSD files. Hope you understand this. As for what you can and can't do with / without them, here is something about the workflow of an application. 1. The HTML archive is the one that contains the code, this code can be pure HTML with SCSS and JS files or HTML/SCSS/JS + Angular/Vue.js/ReactJS coded files, depending on the product that you get. 2. The HTML + PSD or HTML + Sketch contains what you have at point 1 and extra Photoshop or Sketch Files which can be used by a designer from your team. The flow will be something like: the designer is using the files to create a fast prototype, then you talk about that prototype with the developer's team or you show that prototype to a client if everything is fine, you then start to code. Hope this information helps. Best, Manu.
1 year ago

hitatek
  • downloaded
1 year ago

Hello, we downloaded demo but, we saw that you did not used typescript. And we are currently developing our project in typescript, so do you have typescript edition of pro version ? ฤฐf not what do you suggest?

einazare
  • owner

Hello again @hitatek . Yes, none of our React products make use typescript. As you can see React is made to be used with jsx (see the live docs about React here: https://reactjs.org/ ). We are not going to add support for typescript in our React products, since that is a main feature of Angular. Best, Manu.
1 year ago

elcapitan 1 year ago

Do you have a Sketch file for this theme?

einazare
  • owner

Hello again @elcapitan . As per our description (the description of this product) we only have PSD files for this product. Best, Manu.
1 year ago

ejminmehranian
  • downloaded
1 year ago

Can someone explain how is the css classes rendered to each specific page, for example loginpage how is the css placed inside the props?

einazare
  • owner

Hello @ejminmehranian and thank you for your interest in using our product. The css is injected by the withStyles function that you can see at the end of each file in the export line. Best, Manu.
1 year ago

hardik_rathore
  • downloaded
1 year ago

hey I've created a sub-view called editSomething.jsx I want to show this view in dashboard but not in sidePanel how to do it

einazare
  • owner

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

ejminmehranian
  • downloaded
1 year ago

Hello, How can we get user input on custom input components? Tried onChange with setting state but it does not work. Please explain or direct me to a doc page. Thank you

einazare
  • owner

Hello @ @ejminmehranian and thank you for your interest in using our product. You need to put the onChange function on the inputProps prop of the custom input. Best, Manu.
1 year ago

hardikathore 1 year ago

npm run build fails with a error most probably it is not reading the directory pattern for different jsx files , any suggestion what shall I do

einazare
  • owner

Hello again @hardikathore , you need to add NODE_PATH=./src inside the build script. Best, Manu.
1 year ago

accounts86n
  • downloaded

@einazare doesn't seem to work either (had to do it for npm start, assumed it would have worked for this too)
1 year ago

accounts86n
  • downloaded

Is the build process documented anywhere? I see some other scripts in the package.json. I also see the following mee
1 year ago

accounts86n
  • downloaded

the following message: Is the build process documented anywhere? I see some other scripts in the package.json. I also see the following message when running npm run build: ``` The build folder is ready to be deployed. To publish it at https://creativetimofficial.github.io/material-dashboard-react/#/dashboard, run: npm install --save-dev gh-pages Add the following script in your package.json. // ... "scripts": { // ... "predeploy": "npm run build", "deploy": "gh-pages -d build" } Then run: npm run deploy ``` didn't work either
1 year ago

accounts86n
  • downloaded

the following message: Is the build process documented anywhere? I see some other scripts in the package.json. I also see the following message when running npm run build: ``` The build folder is ready to be deployed. To publish it at https://creativetimofficial.github.io/material-dashboard-react/#/dashboard, run: npm install --save-dev gh-pages Add the following script in your package.json. // ... "scripts": { // ... "predeploy": "npm run build", "deploy": "gh-pages -d build" } Then run: npm run deploy ``` didn't work either
1 year ago

accounts86n
  • downloaded

the following message: Is the build process documented anywhere? I see some other scripts in the package.json. I also see the following message when running npm run build: ``` The build folder is ready to be deployed. To publish it at https://creativetimofficial.github.io/material-dashboard-react/#/dashboard, run: npm install --save-dev gh-pages Add the following script in your package.json. // ... "scripts": { // ... "predeploy": "npm run build", "deploy": "gh-pages -d build" } Then run: npm run deploy ``` didn't work either
1 year ago

hardik_rathore
  • downloaded

@accounts86n a quick solution that worked for me was to create a .env file in root directory of project and put NODE_PATH=src then npm run build will generate a static HTML page. another change is to add https:// or http:// for external js or css in html file located in a public folder . I was able to run this static content with an existing express app
1 year ago

ejminmehranian
  • downloaded
1 year ago

is anyone else having issues connecting redux to the template provided? im just trying to mess around but i cant get redux to connect to login page of this app

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