The first 100 people that buy one product, will get another one for free.

Material Dashboard Pro React

Material Dashboard Pro React

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

License

2,381 Downloads
298 Comments
Premium Support
6 months Updates
Release: 1 year ago
Update: 27 days 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!

298 Web Developers commented on this product

Github Docs FAQ Page

romeoguyen
  • downloaded
9 months ago

My website don't have setting icon to change sidebar color, sidebar background(color, image) like preview site. How to enable it?

einazare
  • owner

Hello there @romeoguyen . That is only used by us to show our users and / or potential users, what colors have been implemented by us. If you take a look at the product image on this page, you'll see that it is missing here as well. The board decided that on our next update to add that to our product. Until then you can try and recreate it yourself, or you can try an integrate the one found on this products: https://www.creative-tim.com/product/paper-dashboard-react. Best, Manu.
9 months ago

gianarc
  • downloaded
9 months ago

Just bought Material Dashboard Pro React which is an awesome product! There's just one thing that is really terrible looking compared to the rest: the react table. I think you really have to completely rework this to make it look professional. This is a very important component and it is really a bad one. KR Marc

einazare
  • owner

Hello there @gianarc . Thank you for your interest in working with our products and for your feedback. It really helps us move forward with our products. We will see what we can do about the react-table in our next updates. Best, Manu.
9 months ago

husseinib
  • downloaded
9 months ago

hello, where do i find the PSD files?

einazare
  • owner

Hello there @husseinib and thank you for your interest in working with our products. We've checked and it seems you've got the simple HTML package. If you want the HTML + PSD/Sketch package, which is a different one, we can create a coupon for you just to pay the difference. Please let us know if that will help you. Best, Manu.
9 months ago

jordiblanch
  • downloaded
9 months ago

Hello. Some days ago I added dynamic routes to my customization of Material Dashboard Pro, it works properly but at the top of the page, in the Header.jsx, there appears a "Default Brand Name" label. How can I change this label and set a customized label depending on the matching dynamic route? Thank you!

einazare
  • owner

Hello again @jordiblanch . I am not sure I understand your question. Is this link helpful to you: https://demos.creative-tim.com/material-dashboard-pro-react/#/documentation/routing-system or this one: https://github.com/creativetimofficial/ct-material-dashboard-pro-react/issues/51 ? Best, Manu.
9 months ago

jordiblanch
  • downloaded

Hello @einazare, I used the link: https://github.com/creativetimofficial/ct-material-dashboard-pro-react/issues/51 to create dynamic routes, but when the browser renders any dynamic route, the page header (your Header.jsx file) doesn't set the label to the name text that's defined when defining the dynamic route at dashboard.jsx file. Instead it shows "Default Brand Name". Following your code, I ended at Header.jsx file makeBrand() function that returns the name set at dashboard.jsx route when the route matches the path, but as the dynamic route doesn't match any defined path (because it is dynamic), then "Default Brand Name" is returned. Is there any way to solve this and make Header.jsx set the label to the name (or any other property) defined in dashboard.jsx route when the route is a dynamic route?
9 months ago

mingzheao
  • downloaded
9 months ago

Hello, how can i change color for the variable Danger, Info, Success and others used in style?

einazare
  • owner

Hello there @mingzheao and thank you for your interest in working with our products. You'll find our variables inside <<src/assets/jss/material-dashboard-pro-react.jsx>> and inside <<src/assets/scss/material-dashboard-pro-react/_variables.scss>>. Best, Manu,
9 months ago

ryanjesus_11 9 months ago

Hi @einazare . I hope this is my last doubt, haha. I'm thinking of building a hoc component to do the security of dashboard layout pages. How can I do this? (the auth logic is ready, but the routing is a little bit confuse for me)

einazare
  • owner

Hello again @ryanjesus_11 . I haven't had time to look at the new HOC concepts on React, and I am not sure what guides to give you. I think the easiest way would be to change our routing system with something static and to use our routing system only for the Sidebar component - but once again, not sure how HOC works. Best, Manu
9 months ago

zhangjiawei1104 9 months ago

Hi @einazare, I have a question about the sidebar. When I add more menu with collapse. There are some variables called, "openComponents, openForms, openMaps and so on". Is it useful? When I resize the page or click the parent menu, it always re-mount(re-render) the page.

einazare
  • owner

Hello there @zhangjiawei1104 . I've read your message several times, I even asked some of my colleagues to read it, and we can't seem to understand what the issue is. Could you please explain your issue a bit more, or use other words to do so? Best, Manu.
9 months ago

zhangjiawei1104

@einazare , I want to add more content in the sidebar, so, I changed the routers file. I added a menu item with serval submenu. When I clicked the menu item, the page rerendered. Is it because I moved the Switch method which renders​ the routing stuff outside the component into the component?
9 months ago

einazare
  • owner

Hello again @zhangjiawei1104 . Could you open an issue here: https://github.com/creativetimofficial/ct-material-dashboard-pro-react/issues and give me some steps to reproduce your error? Thank you, Manu.
9 months ago

jukkahuuskonen 9 months ago

@einazare Hi, Is there an option to make <Card /> background transparent? I'm using <Card /> as a control in google maps and I would like to see the map through the card.

jukkahuuskonen

Found the way to do it. Just trying to learn my way through jss...
9 months ago

einazare
  • owner

Hello again @jukkahuuskonen . Glad that everything works fine now. Happy Hacking! Best, Manu.
9 months ago

zhangjiawei1104 9 months ago

I am sorry for the inconvenience. In the sidebar state, there are some variable as following: openComponents: this.activeRoute("/components"), openForms: this.activeRoute("/forms"), openTables: this.activeRoute("/tables"), openMaps: this.activeRoute("/maps"), openPages: this.activeRoute("-page"). What are they use for?

einazare
  • owner

Hello again @zhangjiawei1104 , no inconvenience. Those are used so that when you navigate directly to any of the links that are found inside a collapse of the main menu, or if you refresh the page, the collapse will be default opened. For example, if you naviagte to this link: https://demos.creative-tim.com/material-dashboard-pro-react/#/components/buttons . You will see that the Components collapse link is opened (this.activeRoute("/components")). Does this make sense? Best, Manu.
9 months ago

zhangjiawei1104

Yep. OK. I see. So, I want to add more collapse menu, is it means I need to add these stuff in the state too? When I search the word, "openComponents", I cannot find any place to use it.
9 months ago

einazare
  • owner

Hello again @zhangjiawei1104 . "openComponents" is used inside the src/components/Sidebar/Sidebar.jsx in the state of the component and inside the dashboard routes file (src/routes/dashboard.jsx) around line 79. We've kind of covered this in our live docs here: https://demos.creative-tim.com/material-dashboard-pro-react/#/documentation/routing-system -- see the legend. Best, Manu.
9 months ago

piricjordje
  • downloaded
9 months ago

Hi @einazare , I bought Material Dashboard Pro React and I need help with your Wizard component. The question is: How can I pass props to Step1, Step2, Step3... from WizardView? The problem explanation: I want WizardView component to be a state container for all form fields (inputs) that are spread across 3 wizard steps. And I want form fields (inputs) to be controlled components. So basically I need to send adequate WizardView state to each Step. Also I need to send handleChange handler from WizardView to each Step as onChange event callback. Obviously I need to send it to each Step as props. The problem is that your Wizard component accept steps as renderProps array, with field stepComponent that needs to be a function (eg. stepComponent: Step1), and can't be an object (eg. stepComponent: <Step1 prop="test"/>). I tried to wrap <Step1/> object into an arrow function, and it compiles, but then there is another problem. I start typing into input field, and after 1 character the field loses focus. This happens because onChange from controlled input triggers rerender, and because Step1 is wrapped into arrow function the whole component rerenders, causing input field to lose focus. I tried a bunch of things, but now I really need your help. How to pass props to Step1, Step2, Step3 from WizardView, and not lose focus on controlled input fields (which are in Steps, but controlled from WizardView) because of rerender after each typed characted? Thanks in advance! Regards, Djordje

einazare
  • owner

Hello there @piricjordje and thank you for your interest in working with our products. Is this link useful to you: <<https://github.com/creativetimofficial/ct-material-dashboard-pro-react/issues/128>> or this one: <<https://github.com/creativetimofficial/ct-material-dashboard-pro-react/issues/12>>? Best, Manu.
9 months ago

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