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

Material Kit PRO React

Material Kit PRO React

Premium Material-ui Kit
· 4.90/5 (75 Reviews)

License

819 Downloads
102 Comments
Premium Support
6 months Updates
Release: 1 year ago
Update: 1 month ago

1000 Handcrafted Elements

6 Customized Plugins

12 Example Pages

Documentation

Fully Responsive

Product certified by: Creative Tim

Get Free Demo

Learn more about Material Kit 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 · 60
  • Plugins · 4
  • Examples Pages · 3
  • -
  • -
  • -
What is in PRO Version?
  • Elements · 1000
  • Plugins · 6
  • Example Pages · 12
  • + Documentation
  • + SASS Files
  • + Photoshop Files
Get Free Demo

We are here to help you!

102 Web Developers commented on this product

Github Docs FAQ Page

rimoslav
  • downloaded
11 months ago

Hello, What is the difference between HTML and HTML+PSD package? HTML gets me regular images, and HTML+PSD gets me photoshop files so I can edit images? Or is there more to it?

einazare
  • owner

Hello there @rimoslav . Thank you for your interest in working with our products. The HTML package only gives you the code, while the HTML+PSD, also gives you PSD images/files for our pages. Best, Manu.
11 months ago

rimoslav
  • downloaded
11 months ago

Hello, How can I change CustomInput in form, so I can have an error class (red underline, plus red text added as an error text)? Also, how to change default purple underline in CustomInput (when you click on an input field) to any other color?

rimoslav
  • downloaded

I figured out how to add red underline and red x mark in the field if there's an error, but how to add custom text?
11 months ago

einazare
  • owner

Hello there @rimoslav and thank you for your interest in working with our products. What do you mean by add custom text? Do you mean by adding a defaultValue? Best, Manu.
11 months ago

rimoslav
  • downloaded

I mean to literary display error text from server side validation. Same as bootstrap 4 .is-invalid and .is-valid. classes. So if user enters right password, there's a green check mark next to it, and no text below field. If he enters no password, there's red x, and "Please enter your password" written below input field. If he/she enters wrong password, there's "Wrong password" written below input field. And same for every input field in the form. I managed to do it by adding simple paragraph below every input field if there's an error, but it's not even close to acceptable solution.
11 months ago

hardik_rathore
  • downloaded
11 months ago

@einazare i'm trying to use browserHistory or history.push to redirect to a specific page defined in route say /profile-page but its not working.

einazare
  • owner

Hello again, @hardik_rathore. Can you please open an issue here: https://github.com/creativetimofficial/ct-material-kit-pro-react/issues ? I haven't used history.push, and do not know how to do that. So by opening an issue above, and if you complete the ISSUES_TEMPLATE when you press NEW ISSUE button, than you will have to respond to some questions, which will help me create the same issue that you have. That way i will be able to do testing and find a solution. Best, Manu.
11 months ago

rimoslav
  • downloaded

@hardik_rathore Are you using Redux? Here's how I just did it 5 minutes ago, using Redux, and react-redux library: In Sign-Up component: import React from "react"; import PropTypes from "prop-types"; import { connect } from "react-redux"; import { registerUser } from "../../actions/authActions"; componentDidMount() { window.scrollTo(0, 0); document.body.scrollTop = 0; if (this.props.auth.isAuthenticated) { this.props.history.push("/landing-page"); } } //if user is already logged in, redirect him immediately to landing-page UNSAFE_componentWillReceiveProps(nextProps) { if (nextProps.errors) { this.setState({ errors: nextProps.errors }); } } //errors are coming from back-end and are getting put into props (thanks to mapStateToProps) and from there, put into state. On form submit: handleSubmit(e) { e.preventDefault(); const newUser = { firstName: this.state.firstName, lastName: this.state.lastName, email: this.state.email, password: this.state.password, password2: this.state.password2 }; this.props.registerUser(newUser, this.props.history); } At the bottom of Sign-Up: Register.propTypes = { registerUser: PropTypes.func.isRequired, auth: PropTypes.object.isRequired, errors: PropTypes.object.isRequired, history: PropTypes.object, classes: PropTypes.object.isRequired, rest: PropTypes.array }; const mapStateToProps = state => ({ auth: state.auth, errors: state.errors }); export default connect( mapStateToProps, { registerUser } )(withStyles(signupPageStyle)(Register)); In authActions file, we make axios request: import { GET_ERRORS } from "./types"; export const registerUser = (userData, history) => dispatch => { axios .post("/api/users/register", userData) .then(res => history.push("/login-page")) .catch(err => dispatch({ type: GET_ERRORS, payload: err.response.data }) ); }; In errorReducer file: import { GET_ERRORS, CLEAR_ERRORS } from "../actions/types"; const initialState = {}; export default function(state = initialState, action) { switch (action.type) { case GET_ERRORS: return action.payload; case CLEAR_ERRORS: return {}; default: return state; } } Hope this helps.
11 months ago

jukkahuuskonen 11 months ago

@einazare Hi again, Eslint can't solve paths to your imports. Do you know any way to make eslint able to solve those import paths without using relative paths?

einazare
  • owner

Hello again @jukkahuuskonen . What do you mean <<Eslint can't solve paths to your imports>>? Have you taken a look at our live docs: https://demos.creative-tim.com/material-kit-pro-react/#/documentation/tutorial ? Maybe you do not have the .env file? I really am not sure what to say to you right now, since it's the first time I hear an issue about Eslint. Maybe it would help me if you would detail a bit. Best, Manu.
11 months ago

jukkahuuskonen

@einazare I've that .env -file. VSCode do find the imports, but Eslint gives following error on every import under src-folder: "[eslint] Unable to resolve path to module 'views/Dashboard/Dashboard.jsx'. [import/no-unresolved]" I can suppress the error by turning off that rule, but I'd like to have it on. I tried the "npm install --g cross-env", but it's still a bit unclear how to do that. 1.Do I delete the .env-file? 2. I really don't know how to edit the scripts on package.json. At the moment they are straight from the "Material-kit-react-pro" + several npm modules installed. Otherwise they are as they were. when I tried editing those scripts, nothing worked anymore.
11 months ago

einazare
  • owner

Hello again @jukkahuuskonen . Change the <<"start-js": "react-scripts start",>> line to <<"start-js": "NODE_PATH=./src react-scripts start",>> . Best, Manu.
11 months ago

jukkahuuskonen

@einazare Can't get it to work. getting this error on after<<npm start>> : <<'NODE_PATH' is not recognized as an internal or external command, operable program or batch file. npm ERR! code ELIFECYCLE npm ERR! errno 1...>> I'll report an issue, if this bothers me too much. This isn't the best place (due to the limited editor...) to report more complex problems :) Thank you for the effort though :)
11 months ago

hardik_rathore
  • downloaded
10 months ago

how to handle onChange for CustomInput

hardik_rathore
  • downloaded
10 months ago

inputProps={{ startAdornment: ( <InputAdornment position="start"> {/* <Icon className={classes.icon}>lock_outline</Icon> */} </InputAdornment> ), placeholder: "Password...", onChange:this.handleOnChange }}

einazare
  • owner

Hello again, @hardik_rathore . Yes, it seems you've figured it out. When you have questions like this, it would be useful to take a look at our repo issues (https://github.com/creativetimofficial/ct-material-kit-pro-react/issues) and search here if somebody hasn't already asked that. Best, Manu.
10 months ago

rimoslav
  • downloaded
10 months ago

@einazare Hello. It's impossible to make facebook login without updating react-scripts, since we need webpack-dev-server v 3.1.7 at least, which is react-scripts dependency. Is there any way around it?

rimoslav
  • downloaded
10 months ago

The reason for that is that, the app crashes with HTTPS=true set in the .env file (which is required now for facebook login).

einazare
  • owner

Hello, there @rimoslav . You can update the react, react-router-dom and react-scripts dependencies, but you will have to make some changes to our scripts. Also, you will have to change the import of our css, to scss from import <<"assets/scss/material-kit-pro-react.css?v=1.2.0";>> to <<import "assets/scss/material-kit-pro-react.scss?v=1.2.0";>> . Or add a new script for compiling the scss into css. Here is how you scripts should now look like: <<"scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject", "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start", "compile-scss": "node-sass src/assets/scss/material-kit-pro-react.scss ssrc/assets/scss/material-kit-pro-react.css" },>> . Best, Manu.
10 months ago

rimoslav
  • downloaded

Thanks for the reply. I did it with few extra steps. Besides that, I needed to remove anything containing eslint in optionalDependencies, delete package-lock.json, delete node_modules, delete .eslintrc.js file, run /npm install/ and then /npm prune/. I'll repeat these steps again if I have time, and post the issue on github.
10 months ago

denisoftus 10 months ago

Hi, I was wondering if this can be married to Meteor file structure? The internal links can be changed in the files, but every update to a new version will screw it, is there a way?

einazare
  • owner

Hello @denisoftus .And thank you for your interest in using our product. We haven't used Metero in none of our products and can't really answer your question. But i am going to tell you what we've told to a lot of our users that wanted something in our products that we haven't used, you can try our free version of this product and see if it suits your needs. Here is a link to it: <<https://www.creative-tim.com/product/material-kit-react>>. For the updates, you could have two Github repos, one on which you would develop your product, and one on which you would have our product unaltered. On each of our new releases, you would redownload the product and add it on top of that unaltered repo. Github would tell you all the differences there are from one release to another. Best, Manu
10 months ago

rndika 10 months ago

hello, what difference developer packages and personal packages?

einazare
  • owner

Hello there @rndika and thank you for your interest in working with our products. The Developer lets you create multiple projects for multiple clients, but only lets you to create just one SaaS application for you or your client, while with the personal package, you can only use it for one project - for you or your client - but this project cannot be a SaaS application. Hope this information was of help. Let us know if you have further questions. Best, Manu.
10 months ago

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