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,473 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

zichoole 11 months ago

I got errors like this: Γ— TypeError: Invalid attempt to spread non-iterable instance _nonIterableSpread node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/nonIterableSpread.js:2 1 | export default function _nonIterableSpread() { > 2 | throw new TypeError("Invalid attempt to spread non-iterable instance"); 3 | } View compiled _toConsumableArray node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/toConsumableArray.js:5 2 | import iterableToArray from "./iterableToArray"; 3 | import nonIterableSpread from "./nonIterableSpread"; 4 | export default function _toConsumableArray(arr) { > 5 | return arrayWithoutHoles(arr) || iterableToArray(arr) || nonIterableSpread(); 6 | } View compiled Wizard.nextButtonClick src/components/Wizard/Wizard.jsx:117 114 | undefined 115 | ) { 116 | this.setState({ > 117 | allStates: [ | ^ 118 | ...this.state.allStates, 119 | { 120 | [this.props.steps[this.state.currentStep].stepId]: this[ View compiled onClick src/components/Wizard/Wizard.jsx:288 285 | <Button 286 | color="rose" 287 | className={this.props.nextButtonClasses} > 288 | onClick={() => this.nextButtonClick()} | ^ 289 | > 290 | {this.props.nextButtonText} 291 | </Button> View compiled β–Ά 18 stack frames were collapsed. This screen is visible only in development. It will not appear if the app crashes in production. Open your browser’s developer console to further inspect this error.

einazare
  • owner

Hello there @zichoole . Can you please open a Github issue here: https://github.com/creativetimofficial/ct-material-dashboard-pro-react/issues ? As you can imagine, I cannot read the above minified code. Best, Manu.
11 months ago

zichoole

OK~I am just doing this now. It's my negligence. Thanks for your help.
11 months ago

guilhermeoholz 11 months ago

Hi, @einazare! Do you have any example of how to integrate the kit with Redux-Form? I'm having trouble to render the checkboxes to the Redux-Form Field with the proper styles...

einazare
  • owner

Hello there @guilhermeoholz and thank you for your interest in working with our products. Unfortunately, none of me or my colleagues at Creative-Tim have worked with Redux-Form-Field, and can't really help you with this. You could open a Github issue here: https://github.com/creativetimofficial/ct-material-dashboard-pro-react/issues using our default ISSUES_TEMPLATE (you'll have to tell us what you've tried and how - what have you installed etc.) so that we can replicate your problem and that way we can help you easier. Also, since we haven't worked with the plugin at hand, maybe until we figure out a way to help you, someone from Github will help you. Best, Manu.
11 months ago

zichoole 11 months ago

Hi, there's no settings button in my dashboard page. What could I do?

einazare
  • owner

Hello there @zichoole . Thank you for your interest in working with our product. What settings button do you speak of? Could you please open an issue on Github with your problem? (https://github.com/creativetimofficial/ct-material-dashboard-pro-react/issues) . Best, Manu.
11 months ago

dcedeno
  • downloaded
11 months ago

Hello! Congrats for the awesome work! I'm considering to purchase the Pro version, but something that's breaking the deal is the scroll bar of the sidebar menu. Is there any plan to improve it? Make it something more stylish (transparent, thinner, show on mouseover, etc)

einazare
  • owner

Hello there @dcedeno and thank you for your interest in working with our products. Can you please open a Github issue here: https://github.com/creativetimofficial/ct-material-dashboard-pro-react/issues with some screenshots of the issue? Also, it would be very nice to use the ISSUES_TEPLATE since I would lie to know your OS and more. Best, Manu.
11 months ago

simpleotifications 11 months ago

Hi there. Interested in your premium template. I was just wondering if there a list of the premium components that come with it.. page examples etc. At least some examples ( just even the names ) for everything you offer for a paid fee.

einazare
  • owner

Hello @simpleotifications and thank you for your interest in working with our products. We actually have all that covered in our live preview (https://demos.creative-tim.com/material-dashboard-pro-react/#/dashboard) and our live docs (https://demos.creative-tim.com/material-dashboard-pro-react/#/documentation/tutorial). Hope this information helps you. Best, Manu.
11 months ago

alexuevara 11 months ago

I am super interested in the Charts. How are they used? Can I create charts based on DB information?

einazare
  • owner

Hello there @alexuevara and thank you for your interest in working with our products. You can try our free demo product here: https://demos.creative-tim.com/material-dashboard-react/#/dashboard and see if it suits your needs. Best, Manu.
11 months ago

davebush 11 months ago

Just a simple questions - does the login forms have a forgot password page?

einazare
  • owner

Hello @davebush . Thank you for your interest in working with our products. No, we do not have a forgot password page. I will speak with the board about this and see if they will agree to add this kind of page. Best, Manu.
11 months ago

stanleyliu1006 11 months ago

@einazare I am trying to figure out how can i easily import your customized components sit in the src/components folder to my existing project, i am wondering can i packaging these components into node_modules folder, and import them into exisitng jsx file, or that not possible? Kind regards Stanley

stanleyliu1006 11 months ago

@einazare I am trying to integrate src/components and src/assets folder into a existing react-app, just copy components and assets into my src/ folder. But if want to use the components, i need to twist all the import path otherwise the no module error would show up. for example: in App.js change import Button from 'components/CustomButtons/Button.jsx'; to import Button from './components/CustomButtons/Button.jsx'; Then in components/CustomButtons/Button.jsx change import buttonStyle from ""assets/jss/material-kit-pro-react/components/buttonStyle.jsx"; to import buttonStyle from "../../assets/jss/material-kit-pro-react/components/buttonStyle.jsx"; So on and so forth. So i am wondering what should i do in my react project to avoid manually changing this import paths Kind regards Stanley

einazare
  • owner

Helo there @stanleyliu1006 . Are you using webpack? Best, Manu.
11 months ago

jordiblanch
  • downloaded
11 months ago

Hello, I'm trying to use <Tooltip> in a React Table. I've tried to add it in the React Table example page buttons (under the Actions column), but it is not working, the explorer (Chrome in my case) always complains about: "TypeError: Cannot read property 'title'of undefined". I'm just addind the <Tooltip> object before the <Button> (and closing after it): <Tooltip id="tooltip-top" title="Like" placement="bottom" classes={{ tooltip: styles.tooltip }} > <Button justIcon round simple onClick={() => { let obj = this.state.data.find(o => o.id === key); alert( "You've clicked LIKE button on \n{ \nName: " + obj.name + ", \nposition: " + obj.position + ", \noffice: " + obj.office + ", \nage: " + obj.age + "\n}." ); }} color="info" className="like" > <Favorite /> </Button>{" "} </Tooltip> Could you please tell me what's wrong with it? Thank you!

jordiblanch
  • downloaded

Hello, I'm using latest v1.4.0 version.
11 months ago

einazare
  • owner

Hello again @jordiblanch . You are using the Material-UI version 1.4.0? If so, why don't you download again the product with the newer version? Best, Manu.
11 months ago

jordiblanch
  • downloaded

Hello @einazare, sorry I misunderstood your last reply. I'm not using v1.4.0 Material-UI, but the version defined in your package.json file. I'm using Material Dashboard Pro React v1.4.0 and after installing from ground just to make sure I had not done something to break it, I tried to add the Tooltip to the react table action button but it fails with error: "TypeError: Cannot read property 'title' of undefined". The MUI versions I've tried are "@material-ui/core": "3.1.1" as stated in the package.json file of your Dashboard, and I've also forced to update to latest v3.5.1 MUI version with same results. Could you please check why is this Tooltip failing when used in react table actions? Thank you!
11 months ago

einazare
  • owner

Hello again @jordiblanch . It is a bit weird since I can see that in our product we also make use of Tooltips and it seems that they work perfectly. Can you please Open an issue here: https://github.com/creativetimofficial/ct-material-dashboard-pro-react/issues , and use the ISSUES_TEMPLATE, so we can see all the steps made by you. Or if not, you can send me your project (without node_modules) on our contact form: https://www.creative-tim.com/contact-us or give me access to your repo if you have any so I can clearly see the changes made, or the steps to reproduce the error. Best, Manu.
11 months ago

jordiblanch
  • downloaded

Hello @einazare, I've finally found the (stupid) problem. In the React Table example view, after each <Button>...</Button> there's a {" "} added that I also wrapped within the <Tooltip>. This was generating the error. After removing the {" "} clause, everything worked fine. Thank you for your help!
11 months ago

einazare
  • owner

Hello again @jordiblanch . Can you please tell me what version of MUI are you using? Best, Manu.
11 months ago

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