creativetimofficial / material-kit-react

Material Kit React free and open source by Creative Tim

Material Kit 2 React

Material Kit 2 React is our newest free MUI Design System based on React. Its amazing design is inspired by Material Design and contains all the components you need for your development. If you’re a developer looking to create good-looking websites, rich with features, and highly customisable, here is your match.

Fully Coded Elements Material Kit 2 React is built with over 40 frontend individual elements, like buttons, inputs, navbars, alerts or cards, giving you the freedom of choosing and combining. All components can take variations in color, which you can easily modify using MUI styled() API and sx prop. You will save a lot of time going from prototyping to full-functional code because all elements are implemented.

This free MUI & React template is coming with pre-built design blocks, so the development process is seamless, switching from our pages to the real website is very easy to be done. View all components here. (https://www.creative-tim.com/learning-lab/react/alerts/material-kit/)

Documentation built by Developers Each element is well presented in very complex documentation. You can read more about the documentation here (https://www.creative-tim.com/learning-lab/react/overview/material-kit/).

Example Pages If you want to get inspiration or just show something directly to your clients, you can jump-start your development with our pre-built example pages. You will be able to quickly set up the basic structure for your web project.

View example pages here. (https://demos.creative-tim.com/material-kit-react/#/pages/landing-pages/about-us)

HELPFUL LINKS

• View Github Repository
• Check FAQ Page

Special thanks

During the development of this dashboard, we have used many existing resources from awesome developers. We want to thank them for providing their tools open source:

• MUI - The React UI library for faster and easier web development.
• React Flatpickr - Useful library used to select date.
• React Copy to Clipboard - Useful library used for copying data to the clipboard.
• React Countup - A lightweight React component that can be used to quickly create animations that display numerical data in a more interesting way.
• React Syntax Highlighter - Syntax highlighting component for react with prismjs or highlightjs ast using inline styles.
• ChromaJS - A small-ish zero-dependency JavaScript library for all kinds of color conversions and color scales.
• Nepcha Analytics for the analytics tool. Nepcha is already integrated with Material Kit 2 React. You can use it to gain insights into your sources of traffic.

Let us know your thoughts below. And good luck with development!

Table of Contents

• Versions
• Demo
• Quick Start
• Deploy
• Documentation
• File Structure
• Browser Support
• Resources
• Reporting Issues
• Technical Support or Questions
• Licensing
• Useful Links

Versions

React

|

Demo

• About Us
• Contact Us
• Author
• Pricing page

View More.

Quick start

Quick start options:

• Download from Creative Tim.

Terminal Commands

1. Download and Install NodeJs LTS version from NodeJs Official Page.
2. Navigate to the root ./ directory of the product and run yarn install or npm install to install our local dependencies.

Deploy

🚀 You can deploy your own version of the template to Genezio with one click:

Documentation

The documentation for the Material Dashboard is hosted at our website.

What's included

Within the download you'll find the following directories and files:

material-kit-2-react
    ├── public
    │   ├── apple-icon.png
    │   ├── favicon.png
    │   ├── index.html
    │   ├── manifest.json
    │   └── robots.txt
    ├── src
    │   ├── assets
    │   │   ├── images
    │   │   ├── theme
    │   │   │   ├── base
    │   │   │   ├── components
    │   │   │   ├── functions
    │   │   └── └── index.js
    │   ├── components
    │   │   ├── MKAlert
    │   │   ├── MKAvatar
    │   │   ├── MKBadge
    │   │   ├── MKBox
    │   │   ├── MKButton
    │   │   ├── MKDatePicker
    │   │   ├── MKInput
    │   │   ├── MKPagination
    │   │   ├── MKrogress
    │   │   ├── MKSocialButton
    │   │   └── MKTypography
    │   ├── examples
    │   │   ├── Breadcrumbs
    │   │   ├── Cards
    │   │   ├── Footer
    │   │   └── Navbars
    │   ├── layouts
    │   │   ├── pages
    │   │   │    ├── authentication
    │   │   │    ├── landing-pages
    │   │   │    └── presentation
    │   │   ├── sections
    │   │   │    ├── attention-catchers
    │   │   │    ├── components
    │   │   │    ├── elements
    │   │   │    ├── input-areas
    │   │   │    ├── navigation
    │   │   └──  └── page-sections
    │   ├── pages
    │   │   ├── LandingPages
    │   │   └── Presentation
    │   ├── App.js
    │   ├── index.js
    │   ├── footer.routes.js
    │   └── routes.js
    ├── .eslintrc.json
    ├── .prettierrc.json
    ├── CHANGELOG.md
    ├── ISSUE_TEMPLATE.md
    ├── jsconfig.json
    ├── package.json
    └── README.md

Browser Support

At present, we officially aim to support the last two versions of the following browsers:

Resources

• Live Preview
• Buy Page
• Documentation is here
• License Agreement
• Support
• Issues: Github Issues Page
• Nepcha Analytics - Analytics tool for your website

Reporting Issues

We use GitHub Issues as the official bug tracker for the Material Kit 2 React. Here are some advices for our users that want to report an issue:

1. Make sure that you are using the latest version of the Material Kit 2 React. Check the CHANGELOG from your dashboard on our website.
2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help.

Technical Support or Questions

If you have questions or need help integrating the product please contact us instead of opening an issue.

Licensing

• Copyright 2023 Creative Tim
• Creative Tim license

Useful Links

• More products from Creative Tim

• Tutorials

• Freebies from Creative Tim

• Affiliate Program (earn money)

Social Media

Twitter: https://twitter.com/CreativeTim

Facebook: https://www.facebook.com/CreativeTim

Dribbble: https://dribbble.com/creativetim

Google+: https://plus.google.com/+CreativetimPage

Instagram: https://instagram.com/creativetimofficial

material-kit-react's Issues

class supposed to be called "popperResponsive" - misspelled

The following two lines were probably intended to be "popper..." classes, not what they're currently called :)

material-kit-react/src/components/CustomDropdown/CustomDropdown.jsx

Line 118 in b715b89

[classes.pooperResponsive]: true

material-kit-react/src/assets/jss/material-kit-react/components/customDropdownStyle.jsx

Line 39 in b715b89

pooperResponsive: {

Stop button shadow after not hovered and focused

I am refering to these buttons: https://demos.creative-tim.com/material-kit-react/?_ga=2.117141381.2087365620.1533070297-784988714.1532690153#/

Try and click on one of them, drag the mouse away, and watch how it still has the shadow underneath indicating that it is either hovered or focused or both.

Can this be removed? So that the shadow effect disappears when the button is not hovered or focused?

Cannot fully change the primary color.

I can change the primary color Purple to another color such as Navy blue "#2f2fab" in material-kit-react.jsx
from:
const primaryColor = "#9c27B0";
to:
const primaryColor = "#2f2fab";

But that does not change the primary color on the following parts of the theme:

1. "Tabs with Icons on Card", it stays purple.
2. The shadows beneath all buttons, they stay purple even if I replace all 'rgb' values throughout the theme.
3. Same issue with toggle buttons.
4. The "Login" Landing page.

npm ERR! missing script: build-css

Prerequisites

Please answer the following questions for yourself before submitting an issue.

• [ ✔] I am running the latest version
• [✔ ] I checked the documentation and found no answer
• [ ✔] I checked to make sure that this issue has not already been filed
• [ ✔] I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

Run the following in the terminal:
npm run build

Site then builds.

Current Behavior

Run the following in the terminal:
npm run build

And get an error 'npm ERR! missing script: build-css'

Failure Information (for bugs)

Note, this issue only exists with material-kit-react-v1.4.0. It does not exist with material-kit-react-v1.3.0. The package.json, at least, seems to be different in v1.4.0. Perhaps that has caused this bug?

$ npm run build

TERMINAL OUTPUT from running 'npm run build' in \material-kit-react-v1.4.0 folder:

[email protected] build C:\Users\Bob\Documents\Repositories\material-kit-react-v1.4.0
npm run build-css && react-scripts build

npm ERR! missing script: build-css
npm ERR!
npm ERR! Did you mean this?
npm ERR! build

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Bob\AppData\Roaming\npm-cache_logs\2019-02-16T19_34_36_688Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: npm run build-css && react-scripts build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Bob\AppData\Roaming\npm-cache_logs\2019-02-16T19_34_36_703Z-debug.log

---

OUTPUT OF 2019-02-16T19_34_36_688Z-debug.log:
0 info it worked if it ends with ok
1 verbose cli [ 'C:\Program Files\nodejs\node.exe',
1 verbose cli 'C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'build-css' ]
2 info using [email protected]
3 info using [email protected]
4 verbose stack Error: missing script: build-css
4 verbose stack
4 verbose stack Did you mean this?
4 verbose stack build
4 verbose stack at run (C:\Program Files\nodejs\node_modules\npm\lib\run-script.js:155:19)
4 verbose stack at C:\Program Files\nodejs\node_modules\npm\lib\run-script.js:63:5
4 verbose stack at C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:115:5
4 verbose stack at C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:418:5
4 verbose stack at checkBinReferences_ (C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:373:45)
4 verbose stack at final (C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:416:3)
4 verbose stack at then (C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:160:5)
4 verbose stack at C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:280:12
4 verbose stack at C:\Program Files\nodejs\node_modules\npm\node_modules\graceful-fs\graceful-fs.js:78:16
4 verbose stack at FSReqWrap.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:53:3)
5 verbose cwd C:\Users\Bob\Documents\Repositories\material-kit-react-v1.4.0
6 verbose Windows_NT 10.0.17134
7 verbose argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "build-css"
8 verbose node v10.15.1
9 verbose npm v6.4.1
10 error missing script: build-css
10 error
10 error Did you mean this?
10 error build
11 verbose exit [ 1, true ]

---

OUTPUT OF 2019-02-16T19_34_36_703Z-debug.log:
0 info it worked if it ends with ok
1 verbose cli [ 'C:\Program Files\nodejs\node.exe',
1 verbose cli 'C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'build' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle [email protected]prebuild: [email protected]
6 info lifecycle [email protected]build: [email protected]
7 verbose lifecycle [email protected]build: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]build: PATH: -----I have removed these paths from this output------
9 verbose lifecycle [email protected]build: CWD: C:\Users\Bob\Documents\Repositories\material-kit-react-v1.4.0
10 silly lifecycle [email protected]build: Args: [ '/d /s /c', 'npm run build-css && react-scripts build' ]
11 silly lifecycle [email protected]build: Returned: code: 1 signal: null
12 info lifecycle [email protected]build: Failed to exec build script
13 verbose stack Error: [email protected] build: npm run build-css && react-scripts build
13 verbose stack Exit status 1
13 verbose stack at EventEmitter. (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:301:16)
13 verbose stack at EventEmitter.emit (events.js:189:13)
13 verbose stack at ChildProcess. (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:189:13)
13 verbose stack at maybeClose (internal/child_process.js:970:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)
14 verbose pkgid [email protected]
15 verbose cwd C:\Users\Bob\Documents\Repositories\material-kit-react-v1.4.0
16 verbose Windows_NT 10.0.17134
17 verbose argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "build"
18 verbose node v10.15.1
19 verbose npm v6.4.1
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] build: npm run build-css && react-scripts build
22 error Exit status 1
23 error Failed at the [email protected] build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

Steps to Reproduce

Run the following in the terminal in the \material-kit-react-v1.4.0 folder:
npm run build

Context

Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.

• Device: PC
• Operating System: Windows 10

Failure Logs

Please include any relevant log snippets or files here.

Documentation on tutorial-components.html

There are a lot of typos on the tutorial-components.html page that comes with the download. The html file opens up to this page -> https://creativetimofficial.github.io/material-kit-react/#/documentation/tutorial.

The docs here are rampant with typos. I'd be more than happy to fix them with your permission.

Current version of 'react-popper' module breaks build

react-popper recently changed to version 1.0.0. In this version property 'Target' is missing.

Solution: Install [email protected]

Horizontal TImeLine

Am looking for reactJS Horizontal time line and i have checked in this material kit react.
Can any one help me to get UI + ReactJs Horizontal Time Line

Build error - routes/index.jsx cannot be resolved

Sorry my bad, the issue is for Material React kit and opened it on HTML version, earlier.
File present in the location but error says its not resolved
Anything to do with node version? v7.9.0

Classes undefined

I am trying to use your project into mine but always have the same problems.

classes are undefined.
Debugging I can see that the objects coming for imports (for example: Header) never exists.

Some tip about can solve this?

Thanks.

Change word "built" to "build"

material-kit-react/src/views/Components/Sections/SectionCompletedExamples.jsx

Line 25 in b3e48d3

what you can built with this powerful kit.

Just being picky, sorry.

How to use?

is this for demo? or can i add it on existing material-ui-next.com based project?

Material-ui is now reales stable v1.0.0

now we have breaking change
import from "material-ui" changed to "@material-ui/core"

DateTimePicker not fully match the theme

DateTimePicker as described in documentation not fully match the theme: floating label are not the same size and it behavior not like in CustomInput.

But react-datetime support custom input render, so we can pass CustomInput to it.

Consider another implementation:

import React from 'react';
import Datetime from 'react-datetime';

import CustomInput from 'material-kit-react/...;

const DateTimePicker = (props) => {
  const {
    inputProps: { onBlur, onFocus, value, onChange, ...restInputProps },
    formControlProps,
    labelText,
    ...restProps
  } = props;
  return (
    <Datetime
      onFocus={onFocus}
      onBlur={onBlur}
      value={value}
      onChange={onChange}
      renderInput={(dateInputProps, open, close) => (
        <CustomInput
          inputProps={{ ...dateInputProps, ...restInputProps }}
          onBlur={close}
          onFocus={open}
          labelText={labelText}
          formControlProps={formControlProps}
        />
      )}
      {...restProps}
    />
  );
};

with corrected style

.rdt.rdtOpen .rdtPicker {
  margin-top: 24px;
}

Module not found

I got the following error message although I follow all the steps in doc:

Can't resolve 'assets/scss/material-kit-react.css?v=1.1.0' in .....

system: Mac os 10.11.6
node version: 10.7
npm version: 10.2

There are multiple modules with names that only differ in casing.

Prerequisites

Please answer the following questions for yourself before submitting an issue.

• [✔ ] I am running the latest version
• [✔ ] I checked the documentation and found no answer
• [ ✔] I checked to make sure that this issue has not already been filed
• [✔ ] I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

npm start should compile without warnings

Current Behavior

npm start compiles with warnings

Failure Information (for bugs)

$ npm start

[email protected] start C:\Users\Jack\documents\Repositories\material-kit-react-v1.4.0
react-scripts start

Starting the development server...

Compiled with warnings.

(webpack)/buildin/global.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:

• C:\Users\Jack\Documents\Repositories\material-kit-react-v1.4.0\node_modules\react-scripts\node_modules\babel-loader\lib\index.js??ref--6-oneOf-2!C:\Users\Jack\Documents\Repositories\material-kit-react-v1.4.0\node_modules\webpack\buildin\global.js
  Used by 22 module(s), i. e.
  C:\Users\Jack\Documents\Repositories\material-kit-react-v1.4.0\node_modules\react-scripts\node_modules\babel-loader\lib\index.js??ref--6-oneOf-2!C:\Users\Jack\Documents\Repositories\material-kit-react-v1.4.0\node_modules\sockjs-client\lib\entry.js
• C:\Users\Jack\Documents\Repositories\material-kit-react-v1.4.0\node_modules\react-scripts\node_modules\babel-loader\lib\index.js??ref--6-oneOf-2!C:\Users\Jack\documents\Repositories\material-kit-react-v1.4.0\node_modules\webpack\buildin\global.js
  Used by 7 module(s), i. e.
  C:\Users\Jack\Documents\Repositories\material-kit-react-v1.4.0\node_modules\react-scripts\node_modules\babel-loader\lib\index.js??ref--6-oneOf-2!C:\Users\Jack\documents\Repositories\material-kit-react-v1.4.0\node_modules\popper.js\dist\esm\popper.js

(webpack)/buildin/module.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:

• C:\Users\Jack\Documents\Repositories\material-kit-react-v1.4.0\node_modules\react-scripts\node_modules\babel-loader\lib\index.js??ref--6-oneOf-2!C:\Users\Jack\Documents\Repositories\material-kit-react-v1.4.0\node_modules\webpack\buildin\module.js
  Used by 3 module(s), i. e.
  C:\Users\Jack\Documents\Repositories\material-kit-react-v1.4.0\node_modules\react-scripts\node_modules\babel-loader\lib\index.js??ref--6-oneOf-2!C:\Users\Jack\Documents\Repositories\material-kit-react-v1.4.0\node_modules\node-libs-browser\node_modules\punycode\punycode.js
• C:\Users\Jack\Documents\Repositories\material-kit-react-v1.4.0\node_modules\react-scripts\node_modules\babel-loader\lib\index.js??ref--6-oneOf-2!C:\Users\Jack\documents\Repositories\material-kit-react-v1.4.0\node_modules\webpack\buildin\module.js
  Used by 1 module(s), i. e.
  C:\Users\Jack\Documents\Repositories\material-kit-react-v1.4.0\node_modules\react-scripts\node_modules\babel-loader\lib\index.js??ref--6-oneOf-2!C:\Users\Jack\documents\Repositories\material-kit-react-v1.4.0\node_modules\moment\moment.js

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

1. step 1
2. step 2
3. you get it...

Context

Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.

• Device:
• Operating System:
• Browser and Version:

Failure Logs

Please include any relevant log snippets or files here.

Missing, and out of date dependencies

Quite a few dependencies are missing to get the project to work out of the box

Missing
prop-types
classnames
react-router

Missing and Out of Date
react-popper (also note it must be installed at v0.10.4, the project will not support current 1.0 version)

[email protected] build: `npm run build-css && react-scripts build`

Prerequisites

Please answer the following questions for yourself before submitting an issue.

• I am running the latest version
• I checked the documentation and found no answer
• I checked to make sure that this issue has not already been filed
• I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

After running npm run build
/build folder should be created with all minified files

Current Behavior

npm run build

> [email protected] build E:\github\file-post
> npm run build-css && react-scripts build


> [email protected] build-css E:\github\file-post
> node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/

Wrote 1 CSS files to E:\github\file-post\src\
Creating an optimized production build...
Failed to compile.

Failed to minify the code from this file:

        ./node_modules/ipfs-api/src/utils/module-config.js:7

Read more here: http://bit.ly/2tRViJ9

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `npm run build-css && react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\MyName\AppData\Roaming\npm-cache\_logs\2018-09-26T19_34_24_192Z-debug.log

Failure Information (for bugs)

Above mentioned log file

0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'build' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle [email protected]~prebuild: [email protected]
6 info lifecycle [email protected]~build: [email protected]
7 verbose lifecycle [email protected]~build: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~build: PATH: C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;E:\github\file-post\node_modules\.bin;C:\Program Files (x86)\Common Files\Oracle\Java\javapath;C:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v9.0\bin;C:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v9.0\libnvvp;C:\Program Files (x86)\Intel\iCLS Client\;C:\Program Files\Intel\iCLS Client\;C:\windows\system32;C:\windows;C:\windows\System32\Wbem;C:\windows\System32\WindowsPowerShell\v1.0\;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Program Files (x86)\GtkSharp\2.12\bin;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;D:\xampp\php;C:\ProgramData\ComposerSetup\bin;D:\Software Installing\Git\cmd;C:\ProgramData\chocolatey\bin;C:\Program Files\Java\jre1.8.0_171\bin;D:\Software Installing\Android Studio\jre\jre;C:\Program Files\Java\jdk-10.0.2\bin;D:\Software Installing\Android SDK\platform-tools;C:\WINDOWS\System32\OpenSSH\;D:\Software Installing\Snort\bin;C:\Program Files\nodejs\;D:\Software Installing\Gpg4win\..\GnuPG\bin;C:\Users\Sujay Mahadik\AppData\Local\Programs\Python\Python36-32\Scripts\;C:\Users\Sujay Mahadik\AppData\Local\Programs\Python\Python36-32\;C:\Users\Sujay Mahadik\AppData\Local\Microsoft\WindowsApps;D:\opencv\build\x64\vc14\bin;C:\Users\Sujay Mahadik\AppData\Local\Microsoft\WindowsApps;C:\Users\Sujay Mahadik\AppData\Roaming\Composer\vendor\bin;D:\Software Installing\Microsoft VS Code\bin;D:\Software Installing\go-ipfs;D:\Software Installing\Snort\bin;C:\Users\Sujay Mahadik\AppData\Roaming\npm
9 verbose lifecycle [email protected]~build: CWD: E:\github\file-post
10 silly lifecycle [email protected]~build: Args: [ '/d /s /c', 'npm run build-css && react-scripts build' ]
11 silly lifecycle [email protected]~build: Returned: code: 1  signal: null
12 info lifecycle [email protected]~build: Failed to exec build script
13 verbose stack Error: [email protected] build: `npm run build-css && react-scripts build`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:301:16)
13 verbose stack     at emitTwo (events.js:126:13)
13 verbose stack     at EventEmitter.emit (events.js:214:7)
13 verbose stack     at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack     at emitTwo (events.js:126:13)
13 verbose stack     at ChildProcess.emit (events.js:214:7)
13 verbose stack     at maybeClose (internal/child_process.js:915:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
14 verbose pkgid [email protected]
15 verbose cwd E:\github\file-post
16 verbose Windows_NT 10.0.17134
17 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build"
18 verbose node v8.12.0
19 verbose npm  v6.4.1
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] build: `npm run build-css && react-scripts build`
22 error Exit status 1
23 error Failed at the [email protected] build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

Failure Logs

Please include any relevant log snippets or files here.

Getting an error after NPM Install

need special loader for *.jsx files.

I am using WebStorm, late version and have installed the material-kit-react by issuing:

npm install material-kit-react --save

I addd the .env file and added the path to that file like"./node_modules/material-kit-react/src" and now I am getting this error: ./node_modules/material-kit-react/src/views/LandingPage/LandingPage.jsx Module parse failed: Unexpected token (29:21) You may need an appropriate loader to handle this file type. | class LandingPage extends React.Component { | render() { | const { classes, ...rest } = this.props; | return ( |

FYI, I believe Webstorm uses the Babel. I am using the latest React as well.

This is part of my package.json file:

"@material-ui/core": "^3.9.2",
"@material-ui/icons": "^3.0.2",
"axios": "^0.18.0",
"highcharts-data": "^0.1.7",
"highcharts-exporting": "^0.1.7",
"highcharts-more": "^0.1.7",
"highcharts-offline-exporting": "^0.1.7",
"hls.js": "^0.11.0",
"material-kit-react": "^1.4.0",
"material-ui": "^0.20.2",
"material-ui-treeview": "^3.2.0",
"moment": "^2.24.0",
"react": "^16.8.4",
"react-dom": "^16.8.4",
"react-highcharts": "^16.0.2",
"react-player": "^1.9.3",
"react-redux": "^5.1.1",
"react-router-dom": "^4.3.1",
"react-scripts": "1.1.1",
"react-tap-event-plugin": "^3.0.3",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0",
"video-react": "^0.13.3"

The content of my .babelrc file is
{
"presets": ["es2015", "stage-0", "react"]
}

I am submitting this issue as it was suggested by einazare (Manu).

I would truly appreciate your quick action and kind consideration on this matter.

Thanks,
Farshid

@babel/runtime error when fresh install from a box

I'm trying to create a new install and there is issue with it.
./node_modules/@material-ui/core/ButtonBase/ButtonBase.js
Module not found: Can't resolve '@babel/runtime/helpers/builtin/assertThisInitialized' in '/Users/a/Projects/nns/node_modules/@material-ui/core/ButtonBase`

small visual bug

Hi,

I noticed a small z-index problem on the live presentation page. On the navbar with notifications the dropdown menu appears behind the navbar with profile which is below.

Also on navbar with profile register is spelled 'regiter'. :)

Can't wait for the opportunity to use the kit in react. Keep up the great work.

Module not found: Can't resolve '@babel/runtime/helpers/builtin/assertThisInitialized'

./node_modules/@material-ui/core/ButtonBase/ButtonBase.js
Module not found: Can't resolve '@babel/runtime/helpers/builtin/assertThisInitialized' in '~/node_modules/@material-ui/core/ButtonBase'

how to resolve about that

CustomInput cannot use onChange [Solved]

<CustomInput
          labelText="Username"
          id="username"
          name="username"
          formControlProps={{
                  fullWidth: true
          }}
          onChange={(event) => this.handleChange(event)}
          inputProps={{
                    type: "text",
                    endAdornment: (
                            <InputAdornment position="end">
                                      <People className={classes.inputIconsColor}/>
                            </InputAdornment>
                     )
         }}
/>

handleChange(e) {
        console.log(e);
}

this is my code
everytime i tried type on the input, the event not trigger.
can anyone help me ?

Feature Request: Support for Gatsby

Am about to purchase both the material kit pro react & dashboard to support some project work I'm doing, but I'm having to hack the current free version (this repo) to support Gatsby.

While that's OK for my current project, but would it be possible if you could include instructions or a fork which would make it a lot easier in the future?

The "live preview" doesn't render correctly on an iPad..

The live preview:
https://www.creative-tim.com/live/material-kit-react
doesn't render correctly on an iPad using Chrome or Safari.

The "filter" css class, when applied to the Parallax component, is disabling all the buttons and links

The "filter" css class, when applied to the Parallax component, is disabling all the buttons and links inside the component.

<Parallax filter image={require("assets/img/landing-bg.jpg")}>

Example: https://creativetimofficial.github.io/material-kit-react/#/landing-page

Not sure what exactly content: "''" is supposed to do, but removing it has fixed the issue for me:

filter: { "&:before": { background: "rgba(0, 0, 0, 0.05)" }, "&:after,&:before": { position: "absolute", zIndex: "1", width: "100%", height: "100%", display: "block", left: "0", top: "0", // content: "''" } },

npm start

I have tried to start and I have followed the suggestions on https://demos.creative-tim.com/material-kit-react/#/documentation/tutorial. Here is the error I get no matter which suggesstion I follow:

'NODE_PATH' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: NODE_PATH=./src npm-run-all -p watch-css start-js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.

Pricing page does not change on click

!!! IF YOU DO NOT USE THIS ISSUES TEAMPLATE, YOUR ISSUE IS LIABLE TO BEING IGNORED BY US

Page
https://demos.creative-tim.com/material-kit-pro-react/#/sections#pricing

Prerequisites

Please answer the following questions for yourself before submitting an issue.

• [x ] I am running the latest version
• I checked the documentation and found no answer
• I checked to make sure that this issue has not already been filed
• [x ] I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

After clicking "Get Started" I expect that pricing section to become selected.

Current Behavior

Nothing happens

Failure Information (for bugs)

No info available

Steps to Reproduce

1. go to https://demos.creative-tim.com/material-kit-pro-react/#/sections#pricing
2. click "get started"
3. enjoy nothing happening

Context

Same is happening whether on a local setup or on your website demo site.

• Device:
• Operating System:
• Browser and Version:

Failure Logs

Please include any relevant log snippets or files here.

Component npm module?

Awesome work! I love the components design.
Do you plan to publish the components as separate modules that I could use together with material-ui v1.0?
Love to see if there is a plan for Typescript support as well.

is this them support RTL

is this theme support RTL?, if yes how configure it for RTL support?

Input from CustomInput component doesn't update state

Hi,

need to update state for email address and password in order to authenticate. using the signup page (built from the template of login page) but text entered into those input fields aren't updating in state. I've looked into the PropTypes for CustomInput and can't seem to get state to update after an onChange event.

Has anyone else been experiencing this issue?

Thanks!

Material Kit React vs Material UI

I'm confused about the reasoning to choose Material Kit React over Material UI. What advantages does it gain over Material UI?

👋 Some notes I took looking at the source code :)

Hi 👋 ,

I have been browsing most of the components. I'm very happy to see this themed version of Material-UI! Great job. I have gathered some notes looking at the source code:

• I'm not sure to see why it's important. Maybe saying it's React related?
  

  material-kit-react/src/components/Badge/Badge.jsx

  Line 2 in b4e1912

  // nodejs library to set properties for components

• No need to destructure the props
  

  material-kit-react/src/components/Badge/Badge.jsx

  Line 10 in b4e1912

  function Badge({ ...props }) {

  
  Babel will transpile it, it's not free.
• You can shorten the [className]: className !== undefined pattern:
  

  material-kit-react/src/components/Card/CardBody.jsx

  Lines 15 to 18 in b4e1912

  	const cardBodyClasses = classNames({
  	[classes.cardBody]: true,
  	[className]: className !== undefined
  	});

 const cardBodyClasses = classNames({ [classes.cardBody]: true }, className); 

• Something, using the classes API over the className can save LoC.
  However, in order to be efficient, the parent child keys much match the children style key you want to override.
• If you want to allow full customization of top of this theme, better take the habite of spreading the rest after rather than before the other properties:
  

  material-kit-react/src/components/CustomButtons/IconButton.jsx

  Lines 11 to 12 in b4e1912

  	<IconButton
  	{...rest}

• Nice composed component 👍
  

  material-kit-react/src/components/CustomDropdown/CustomDropdown.jsx

  Line 22 in b4e1912

  class CustomDropdown extends React.Component {

• I think that it would be better to use the ref property to get a reference on the root element rather than using this logic. You might have different header in the page, who knows.
  

  material-kit-react/src/components/Header/Header.jsx

  Lines 40 to 41 in b4e1912

  	document.body
  	.getElementsByTagName("header")[0]

  
  We use https://github.com/mui-org/material-ui/blob/f64c730a3faacd39ce3977b6a9d058a208446d82/packages/material-ui/src/internal/RootRef.js from time to time. Maybe we can make it public, but at least, I hope you get the idea.

• material-kit-react/src/components/Footer/Footer.jsx

  Line 57 in b4e1912

  © {1900 + new Date().getYear()} , made with{" "}

  
  Why don't you use .getFullYear(), isn't .getYear() deprecated?

Keep the good work :)

Material-ui-react v4

Do you have a timeline/plans for supporting Material-ui-react v4? The alpha is out and it's clear that some changes will be required.

Very slow to Edit and Compile a Page

Hi,

I am trying to use the basic themes for one of the project.
I am building a display panel with few components on it.
The problem is for a very simple modification it compile the whole bundle including the kit.
The process is very slow to use it this way (Takes 2 mins sometimes)
I would like to know - how I can make faster development
Thanks
Manoj

[CircleCI] Module not found, build failing

Prerequisites

Please answer the following questions for yourself before submitting an issue.

• [Y] I am running the latest version
• [Y] I checked the documentation and found no answer
• [Y] I checked to make sure that this issue has not already been filed
• [Y] I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

The CircleCI build will successfully build without Module not found error.

Current Behavior

The CircleCI build is failing with a Module not found error.

Steps to Reproduce

1. Unzip, material-kit-react-v1.2.0.zip, call npm install.
2. Copy entire directory to repository.
3. npm install
4. npm install --g cross-env
5. Added NODE_PATH=./src in package.json scripts, alternatively can create .env file with NODE_PATH=src.
6. Commit and push repository.

Context

Added NODE_PATH=./src in package.json scripts, even tried with creating .env file with NODE_PATH=src, both method works locally, but the committed repository on CircleCI is always failing. I even tried making absolute path to relative path, still no luck. Tried all variations of NODE_PATH=./src everything works locally, but not on CircleCI. Even tried setting environment on config.yml.

config.yml

- run:
  name: (Production) Build
  command: npm run build
  environment:
    NODE_PATH: src/

package.json

"scripts": {
    "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
    "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
    "start-js": "react-scripts start",
    "start": "npm-run-all -p watch-css start-js",
    "build": "npm run build-css && react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "lint:check": "eslint . --ext=js,jsx;  exit 0",
    "lint:fix": "eslint . --ext=js,jsx --fix;  exit 0",
    "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start",
    "build-package-css": "node-sass-chokidar src/assets/scss/material-kit-react.scss dist/material-kit-react.css",
    "build-package": "npm run build-package-css && babel src --out-dir dist"
},

config.yml

version: 2
jobs:
  build:
    docker:
      # specify the version you desire here
      - image: circleci/node:8.12.0
      - image: fstab/aws-cli

      # Specify service dependencies here if necessary
      # CircleCI maintains a library of pre-built images
      # documented at https://circleci.com/docs/2.0/circleci-images/
      # - image: circleci/mongo:3.4.4

    working_directory: ~/repo

    steps:
      - checkout

      - run: sudo apt-get -y -qq install awscli
      # Download and cache dependencies
      - restore_cache:
          keys:
            - v1-dependencies-{{ checksum "package.json" }}
            # fallback to using the latest cache if no exact match is found
            - v1-dependencies-

      - run: npm install

      - save_cache:
          paths:
            - node_modules
          key: v1-dependencies-{{ checksum "package.json" }}

      - run: npm run build
      - run: aws configure set default.s3.signature_version s3v4
      - run: aws s3 cp ./build s3://admin.app.com/ --recursive --region eu-west-2

• npm: 6.4.1
• node: v8.12.0

Failure Logs

.env with NODE_PATH=src, local npm run build, builds successfully.

> [email protected] build /home/circleci/repo
> npm run build-css && react-scripts build


> [email protected] build-css /home/circleci/repo
> node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/

Wrote 1 CSS files to /home/circleci/repo/src/
Creating an optimized production build...
Failed to compile.

Module not found: Error: Can't resolve 'views/Components/Components.jsx' in '/home/circleci/repo/src/routes'


npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `npm run build-css && react-scripts build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/circleci/.npm/_logs/2018-09-20T13_53_00_276Z-debug.log
Exited with code 1

Custom Dropdown menuOnClick now working

Prerequisites

Please answer the following questions for yourself before submitting an issue.

• [ yes] I am running the latest version
• [yes ] I checked the documentation and found no answer
• [yes ] I checked to make sure that this issue has not already been filed
• [yes ] I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

When Value is changed on dropdown menuOnClick method is not firing

Current Behavior

What is the current behavior?

Steps to Reproduce

<CustomDropdown
id="purpose"
name="purpose"
buttonText={selectedPurposeIndex!==null ? Purposes[selectedPurposeIndex] : 'Select Purpose of the request'}
dropdownHeader="Select Purpose of the request"
menuOnClick={handlePurposeChange}
buttonProps={{
color: "info",
fullWidth: true
}}
dropdownList={Purposes}
/>

handlePurposeChange is passed as props

handlePurposeChange = (event, index) => {
console.log(index)
this.setState({
selectedPurposeIndex: index,
dropPurpose: Purposes[index]
})
};

You may need an appropriate loader to handle this file type.

in package.json

"dependencies": {
    "@material-ui/core": "^1.2.1",
    "@material-ui/icons": "^1.1.0",
    "material-kit-react": "git+https://github.com/creativetimofficial/material-kit-react.git",
    "react": "^16.4.0",
    "react-dom": "^16.4.0",
    "react-scripts": "1.1.4"
  },

in component
import Button from "material-kit-react/src/components/CustomButtons/Button";

in component.render
<Button type="button" color="primary">Primary</Button>

error is..

Failed to compile.

./node_modules/material-kit-react/src/components/CustomButtons/Button.jsx
Module parse failed: Unexpected token (15:25)
You may need an appropriate loader to handle this file type.
| import buttonStyle from "assets/jss/material-kit-react/components/buttonStyle.jsx";
|
| function RegularButton({ ...props }) {
| const {
| classes,

whats wrong with here?

You should not use <Link> outside a <Router>, material-kit-react/src/components/Header/HeaderLinks.jsx

You should not use <Link> outside a <Router>

material-kit-react/src/components/Header/HeaderLinks.jsx

Paths are missing ../../

I am still trying to overcome compile errors for wrong paths so far starting with assets or components. I have had to put ../../ or ../../../ or ../../../../ or ../../../../../ to make them work. There are so many of them I still haven't yet started the app since I downloaded, so I can't wait until all these compile errors are overcome so i can actually see what this app is like.

Change color Appbar in Header.jsx

Expected Behavior

I want to change the colors in Header.jsx : defaults are primary, secondary ...

Current Behavior

if I choose a specific RGB color or any CSS color it didn't work,

I tried to use HUE from material UI but also didn't work with react 16+

Using the colors in colors.scss

I'm using the PRO repo.

Expected Behavior

I'm trying to use the colors defined in variables/colors.scss.

Current Behavior

The color variable name is being used in a view, but is not rendering (black is used instead)

Failure Information (for bugs)

This must be a really obvious failure on my part, but I can't see how to use the colors defined in that file, with the sample pages produced. For example, the icon colors in SectionDescription.jsx are specified as bootstrap variable colors. Im trying to change them to use colors defined in colors.scss as shown below.

<InfoArea
                  title="Multi-Purpose Sections"
                  description="Putting together a page has never been easier than matching together sections. From team presentation to pricing options, you can easily customise and built your pages."
                  icon={ViewDay}
                  iconColor="indigo-400"
                  vertical={true}
                />

Steps to Reproduce

Mac

Failure Logs

No errors - just not getting the desired result.

Thanks in advance.

npm run start issue

Hi there,
just cloned,
npm i
npm run start

./src/index.js
Module not found: Can't resolve 'assets/scss/material-kit-react.css' in '/home/utente/Desktop/projects/material-kit-react/src'

Running Ubuntu 16.4
npm 6.0.1
node 9.11.1

BUG - Dist bundle is not rendering Regular Button (Exception thrown)

Prerequisites

Please answer the following questions for yourself before submitting an issue.

• [Y ] I am running the latest version
• [ Y] I checked the documentation and found no answer
• [Y ] I checked to make sure that this issue has not already been filed
• [Y ] I'm reporting the issue to the correct repository (for multi-repository projects)

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

1. step 1 -
   Create the package using build-package scripts
   Mount the package with npm link (globally) - material-kit-react module
   Create the Sample Page using and reference all the material-kit-react components
   All componets are rendered except Button. Here is the sample LoginCardPanelPage

`
import React from "react";
// @material-ui/core components
import withStyles from "@material-ui/core/styles/withStyles";
import InputAdornment from "@material-ui/core/InputAdornment";
import Icon from "@material-ui/core/Icon";
// @material-ui/icons
import Email from "@material-ui/icons/Email";
import People from "@material-ui/icons/People";
// core components
// import Header from "components/Header/Header.jsx";
// import HeaderLinks from "components/Header/HeaderLinks.jsx";
// import Footer from "components/Footer/Footer.jsx";
import GridContainer from "material-kit-react/dist/components/Grid/GridContainer";
// import GridContainer from "material-ui-kit/dist/components/Grid/GridContainer"
///home/ct-developer/NODEPRJ/mui-sample-react-app/node_modules/material-kit-react/dist/components/Card/Card.js
import GridItem from "material-kit-react/dist/components/Grid/GridItem";
import Button from "material-kit-react/dist/components/CustomButtons/Button";
import Card from "material-kit-react/dist/components/Card/Card";
import CardBody from "material-kit-react/dist/components/Card/CardBody";
import CardHeader from "material-kit-react/dist/components/Card/CardHeader";
import CardFooter from "material-kit-react/dist/components/Card/CardFooter";
import CustomInput from "material-kit-react/dist/components/CustomInput/CustomInput";

import loginPageStyle from "material-kit-react/dist/assets/jss/material-kit-react/views/loginPage.js";
// /home/ct-developer/NODEPRJ/mui-sample-react-app/node_modules/material-kit-react/dist/assets/jss/material-kit-react/views/loginPage.js

// import image from "assets/img/bg7.jpg";

class LoginCardPanelPage extends React.Component {
constructor(props) {
super(props);
// we use this to make the card to appear after the page has been rendered
this.state = {
cardAnimaton: "cardHidden"
};
}
componentDidMount() {
// we add a hidden class to the card and after 700 ms we delete it and the transition appears
setTimeout(
function() {
this.setState({ cardAnimaton: "" });
}.bind(this),
700
);
}
render() {
const { classes, ...rest } = this.props;
return (

      <div className={classes.container}>
        <GridContainer justify="center">
          <GridItem xs={12} sm={12} md={4}>
            <Card className={classes[this.state.cardAnimaton]}>
              <form className={classes.form}>
                <CardHeader color="primary" className={classes.cardHeader}>
                  <h4>Login</h4>
                  <div className={classes.socialLine}>

                  </div>
                </CardHeader>
                <p className={classes.divider}>Or Be Classical</p>
                <CardBody>
                  <CustomInput
                    labelText="First Name..."
                    id="first"
                    formControlProps={{
                      fullWidth: true
                    }}
                    inputProps={{
                      type: "text",
                      endAdornment: (
                        <InputAdornment position="end">
                          <People className={classes.inputIconsColor} />
                        </InputAdornment>
                      )
                    }}
                  />
                  <CustomInput
                    labelText="Email..."
                    id="email"
                    formControlProps={{
                      fullWidth: true
                    }}
                    inputProps={{
                      type: "email",
                      endAdornment: (
                        <InputAdornment position="end">
                          <Email className={classes.inputIconsColor} />
                        </InputAdornment>
                      )
                    }}
                  />
                  <CustomInput
                    labelText="Password"
                    id="pass"
                    formControlProps={{
                      fullWidth: true
                    }}
                    inputProps={{
                      type: "password",
                      endAdornment: (
                        <InputAdornment position="end">
                          <Icon className={classes.inputIconsColor}>
                            lock_outline
                          </Icon>
                        </InputAdornment>
                      )
                    }}
                  />
                </CardBody>
                <CardFooter className={classes.cardFooter}>
                  <Button simple color="primary" size="lg">
                    Get started
                  </Button>
                </CardFooter>
              </form>
            </Card>
          </GridItem>
        </GridContainer>
      </div>
  </div>
);

}
}

export default withStyles(loginPageStyle)(LoginCardPanelPage);
`
2. step 2
THe page is not rendering with Button component - ifyou remove that component it renders. This is the exception in debug console -

Download the React DevTools for a better development experience: https://fb.me/react-devtools
react-dom.development.js:17411 Download the React DevTools for a better development experience: https://fb.me/react-devtools
index.js:2178 Warning: Failed prop type: Invalid prop component of type object supplied to Route, expected function.
in Route (at src/index.js:19)

invariant.js:42 Uncaught Error: Unable to find node on an unmounted component.
at invariant (invariant.js:42)
at findCurrentFiberUsingSlowPath (react-dom.development.js:3779)
at findCurrentHostFiber (react-dom.development.js:3887)
at findHostInstance (react-dom.development.js:16825)
at Object.findDOMNode (react-dom.development.js:17311)
at ButtonBase.componentDidMount (ButtonBase.js:222)
at commitLifeCycles (react-dom.development.js:14524)
at commitAllLifeCycles (react-dom.development.js:15738)
at HTMLUnknownElement.callCallback (react-dom.development.js:145)
at Object.invokeGuardedCallbackDev (react-dom.development.js:195)
at invokeGuardedCallback (react-dom.development.js:248)
at commitRoot (react-dom.development.js:15908)
at completeRoot (react-dom.development.js:17296)
at performWorkOnRoot (react-dom.development.js:17224)
at performWork (react-dom.development.js:17128)
at performSyncWork (react-dom.development.js:17100)
at requestWork (react-dom.development.js:16988)
at scheduleWork (react-dom.development.js:16782)
at scheduleRootUpdate (react-dom.development.js:17470)
at updateContainerAtExpirationTime (react-dom.development.js:17497)
at updateContainer (react-dom.development.js:17524)
at ReactRoot../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render (react-dom.development.js:17786)
at react-dom.development.js:17926
at unbatchedUpdates (react-dom.development.js:17351)
at legacyRenderSubtreeIntoContainer (react-dom.development.js:17922)
at Object.render (react-dom.development.js:17981)
at Object../src/index.js (index.js:15)
at webpack_require (bootstrap b3c89797df7aeab37343:678)
at fn (bootstrap b3c89797df7aeab37343:88)
at Object.0 (LoginCardPanelPage.jsx:127)
at webpack_require (bootstrap b3c89797df7aeab37343:678)
at ../material-kit-react/dist/assets/jss/material-kit-react.js.Object.defineProperty.value (bootstrap b3c89797df7aeab37343:724)
at bootstrap b3c89797df7aeab37343:724

index.js:2178 The above error occurred in the component:
in ButtonBase
in WithStyles(ButtonBase)
in Button
in WithStyles(Button)
in RegularButton
in WithStyles(RegularButton) (at LoginCardPanelPage.jsx:113)
in div
in CardFooter
in WithStyles(CardFooter) (at LoginCardPanelPage.jsx:112)
in form (at LoginCardPanelPage.jsx:55)
in div
in Card
in WithStyles(Card) (at LoginCardPanelPage.jsx:54)
in div
in Grid
in WithStyles(Grid)
in GridItem
in WithStyles(GridItem) (at LoginCardPanelPage.jsx:53)
in div
in Grid
in WithStyles(Grid)
in GridContainer
in WithStyles(GridContainer) (at LoginCardPanelPage.jsx:52)
in div (at LoginCardPanelPage.jsx:51)
in div (at LoginCardPanelPage.jsx:49)
in LoginCardPanelPage (created by WithStyles(LoginCardPanelPage))
in WithStyles(LoginCardPanelPage) (created by Route)
in Route (at src/index.js:19)
in Switch (at src/index.js:17)
in Router (at src/index.js:16)

Clearfix is missing from the npm install

If I copy the source from https://demos.creative-tim.com/material-kit-react/#/documentation/notifications and use it as my base, when it tries to compile I get an error:

Module not found: Can't resolve 'components/Clearfix/Clearfix.jsx'

I looked and it is not there.

Recommend allowing dropdown to close after button clicked & dropdown is open

material-kit-react/src/components/CustomDropdown/CustomDropdown.jsx

Line 33 in fbcd45c

this.setState({ open: true });

I implemented this by making a new variable in the state called buttonToggle, defaulting it to false in the constructor, then changing it in handleClick like this:

handleClick = () => {
    const buttonToggle = !this.state.buttonToggle;
    this.setState({ buttonToggle: buttonToggle, open: buttonToggle });
}

Even when I tried just doing this.setState({ open: !this.state.open }), the handleClose method was being called before the handleClick method, so just flipping the open state variable wasn't enough.

Please publish this kit on npm

Publish this kit on npm help coders deploy more efficient, and update in a more convenient way, so why not doing this?

How to pass props.classes to children

I wish to load multiple Cards (like the default ones in LandingPage/TeamSection) like follow :

const ProductCard = (props) => {
  const classes = props.classes;
  return (
    <GridItem xs={12} sm={12} md={4}>
      <Card plain>
        <GridItem xs={12} sm={12} md={6} className={classes.itemGrid}>
          <img src={props.item.imgUrl} alt="..." className={imageClasses} />
        </GridItem>
        <h4 className={classes.cardTitle}>
        {props.item.name}
          <br />
          <small className={classes.smallTitle}>{props.item.seller.name}</small>
        </h4>
        <CardBody>
          <p className={classes.description}>
            Quantity: {props.item.quantity}
            <br/>
            Rate: {props.item.rate}
          </p>
        </CardBody>
        <CardFooter className={classes.justifyCenter}>
          <Button
            round
            color="facebook"
          >
           BID
          </Button>
        </CardFooter>
      </Card>
    </GridItem>
  );
}

const ProductGrid = (props) => {
  return (
    props.products.map((item) =>{
        return(
            <ProductCard key={item._id} item={item}/>
        );
    }) 
    );
}

class TeamSection extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      items : []
    };
    this.loadProducts = this.loadProducts.bind(this); 
  }

  componentDidMount(){
    this.loadProducts();
  }

  loadProducts(){
    fetch('/api/items',{method: 'GET'}).then(response => response.json()).then(data => {
      this.setState({items: data.items});
    }).catch(err =>{
        console.log(err.message);
    });
  }

  render() {
    const { classes } = this.props;
    const imageClasses = classNames(
      classes.imgRaised,
      classes.imgRoundedCircle,
      classes.imgFluid
    );
    return (
      <div className={classes.section}>
        <h2 className={classes.title}>Here is our team</h2>
        <div>
          <GridContainer>
            <ProductGrid products={this.state.items} classes={classes}  /> 
          </GridContainer>
        </div>
      </div>
    );
  }
}
export default withStyles(teamStyle)(TeamSection);

I am not sure of how to use classes and tried pushing them as props, but it always leads to an error of classes being undefined in the ProductCard component.
What is the correct way to solve this?
Thanks!

Routes in header

I'm having trouble to use the route in headerlink, I changed the headerlink component to this

function HeaderLinks({ ...props }) { const { classes } = props; return ( <List className={classes.list}> <ListItem className={classes.listItem}> <Link to="/about" exact> <Button color="transparent" className={classes.navLink} > {props.navLink1} </Button> </Link>

and add the code inside index.jsx
import SectionAbout from "views/Components/Sections/SectionAbout.jsx"; { path: "/about exact", name: "About", component: SectionAbout },

and here's header component inside components views looks like

<Header brand="Novel-ist" rightLinks={<HeaderLinks navLink1="About" />} fixed color="transparent" changeColorOnScroll={{ height: 400, color: "montecarlo" }} {...rest} />

can i put the link inside the header component or is there any way to put the the link in navigation bar?

Any plans for typescript support

Hi Team,

The work is really awesome, to use it effectively is there any plan for typescript support?