Articles and Templates Collection

This catalog page features representative articles and a collection of the best Nickgenom templates taken from various interesting sources on the internet

material kit react.webp
Modification, React, Template

Material Kit React + Modification

06 October 2020

Material Kit React is a Free Material-UI v4.1.0 Kit with a new and fresh design inspired by Google's material design. You asked for it, so we made it. It's a pleasure to introduce you to the concept of materials in a set of easy-to-use and beautiful components. Along with rearranging Material-UI elements, you'll find three sample pages with full code, to help you design your next project.

Material Kit React makes use of light, surfaces, and motion. It uses intentional color choices, edge-to-edge imagery and large-scale typography. The general layout resembles a sheet of paper following several different layers, so that depth and regularity are evident. The main navigation remains on the left and actions on the right.

This new design has elements of research on ink and paper and the way objects and materials interact in real life. The result is a beautiful, consistent set of elements that can help you get started on your next project. Material Kit React is a great tool if you want to create a web presence for your Android app and need to be consistent, leaving the impression of visually similar elements. It's also a great resource on its own, looks pretty and helps you build your web pages.

Material Kit React uses an amazing framework that can give us advantages such as material effects, animations, ripples and transitions.


Original Source

This template has been previously published on the website Creative Tim.


MIT - Copyright (c) 2018 Creative Tim.


Material Kit React is built on top of Material UI using create-react-app. The original features in this free version of the template before modification are as follows :

  • @material-ui/core: 4.10.0
  • @material-ui/icons: 4.9.1
  • classnames: 2.2.6
  • history: 4.10.1
  • moment: 2.26.0
  • node-sass: 4.14.1
  • nouislider: 14.5.0
  • prop-types: 15.7.2
  • react: 16.13.1
  • react-datetime: 2.16.3
  • react-dom: 16.13.1
  • react-router-dom: 5.2.0
  • react-scripts: 3.4.1
  • react-slick: 0.26.1
  • react-swipeable-views: 0.13.9
  • @babel/cli: 7.10.1
  • @babel/plugin-proposal-class-properties: 7.10.1
  • @babel/preset-env: 7.10.1
  • @babel/preset-react: 7.10.1
  • eslint-config-prettier: 6.11.0
  • eslint-plugin-prettier: 3.1.3
  • eslint-plugin-react: 7.20.0
  • gulp: 4.0.2
  • gulp-append-prepend: 1.0.8
  • prettier: 2.0.5
  • typescript: 3.9.3
  • Supporting components :
    • Badges
    • Button
    • Cards
    • RadioSwitch checkbox
    • Clearfix
    • Dropdown
    • Footer
    • Grid
    • Icons
    • InfoAreas
    • Input
    • Linear progress
    • Modal
    • Navigation
    • NavPills
    • Notifications
    • Page numbering
    • Parallax
    • Popovers
    • Tab
    • Tooltips
    • Typography

Main Technology

  • Material-UI for React Js components
  • Eslint
  • Gulp, and
  • Prettier


The process of modifying this template includes the following technologies in its configuration :

  • NPX already installed!
  • Minify JS using Terser v4.8.0
  • Minify CSS using Less v3.11.3
  • Minify SCSS using Node Sass v4.14.1 + Dart Sass v1.26.9
  • Compiler using Autoprefixer 9.8.4
  • Support source MAP JS (customized)
  • Support source MAP CSS (customized)
  • Configured using Babel v7.10.3
  • Transpile with Babylon
  • Support SASS
  • Support Autoprefixer
  • Install Dependencies :
    • @material-ui/core v.4.11.0
    • @material-ui/icons v.4.9.1
    • classnames v.2.2.6
    • history v.5.0.0
    • moment v.2.29.0
    • node-sass v.4.14.1
    • nouislider v.14.6.2
    • prop-types v.15.7.2
    • react v.16.13.1
    • react-datetime v.3.0.4
    • react-dom v.16.13.1
    • react-router-dom v.5.2.0
    • react-scripts v.3.4.3
    • react-slick v.0.27.11
    • react-swipeable-views v.0.13.9
    • @babel/cli v.7.11.6
    • @babel/plugin-proposal-class-properties v.7.10.4
    • @babel/preset-env v.7.11.5
    • @babel/preset-react v.7.10.4
    • eslint-config-prettier v.6.12.0
    • eslint-plugin-prettier v.3.1.4
    • eslint-plugin-react v.7.21.3
    • gulp v.4.0.2
    • gulp-append-prepend v.1.0.8
    • prettier v.2.1.2
    • typescript v.4.0.3
    • Overall theme optimization
    • Minimize assets

Template Repair

The process of modifying this template includes the following technologies in its configuration :

  • Clear warnings in browser console :
    [HMR] Waiting for update signal from WDS...
    0.chunk.js:232724 Download the React DevTools for a better development experience:
    0.chunk.js:208008 Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See for details.
    * Move data fetching code or side effects to componentDidUpdate.
    * If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at:
    * Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run "npx react-codemod rename-unsafe-lifecycles" in your project source folder.

    Please update the following components: DateTime, ReactSwipableView
    printWarning @ 0.chunk.js:208008
  • The warning above is a global issue and is a BUG in React. You can see this troubleshooting here

Guide and Preparation for use

I assume you will start by downloading this original template using the download button at the end of this article. Alright, let's get straight to the point!

  1. The most basic step, you should get used to playing with NPM and NODEJS. If you are a beginner, please study this sparse material on this website. The main key is not to be lazy to read and understand!
  2. To use this template you have to do the following steps :

    • Download and Install NodeJs from NodeJs official website page

    • If NodeJs and NPM are already installed, then open and extract the zip file of the original template that you downloaded earlier to a folder on your computer.

    • Open Terminal

    • Navigate to your project file folder (so that the terminal can read the extracted template folder)

    • Type in terminal : npm install

    • Then : npm start

    • Alternatively, use this command : npm run install:clean

    • this will remove node_modules and package-lock.json, and will automatically run the script install and script start

    • Navigate to : http://localhost:3000

  • NOTES : For more information, you can refer to the tutorial documentation reference from CreativeTim here or CreativeTim recommendation documentation here.

Guide to running the modified template

Run the local server. I happen to be using XAMPP. You can use other local servers like; WAMP, MAMP, Wordpress, or Node.js, or something else.

  1. Open terminal
  2. Navigate to the project folder. Example :
    C:\Windows\system32>cd C:\xampp\htdocs\material-kit-react-modification
    C:\xampp\htdocs\material-kit-react-modification>npm start
  1. then, run/type : npm start
  • NOTES : the npm install command is not required!. in this stage the browser will automatically open port http://localhost:3000. If it doesn't open automatically, you can open it manually by typing in the browser url field the address ```http://localhost:3000````. If you get a message in the terminal like this :
    C:\xampp\htdocs\material-kit-react-modification>npm start
    material-kit-react@1.9.0 start C:\xampp\htdocs\material-kit-react-modification
    react-scripts start

    Compiled successfully!

    You can now view material-kit-react in the browser.

      Local:            http://localhost:3000
      On Your Network:

    Note that the development build is not optimized.
    To create a production build, use npm run build.

it means everything is working perfectly. FINISHED ! .


Leave a Comment

Send reply
24175 seen

1-1 from 1

Reply to this discussion

You can't edit posts or create replies: You must be logged in before you can post.

Words of wisdom

" The change in your life is behind that door, if you can't knock then break it down! "

Article Reference :

Modern CMS Website Platform

Tags post: Reference 05 August 2021

Different Types of Licenses

Tags post: Code, Reference 29 September 2020

CSS | Popular terms on the website

Tags post: Code, Reference 15 September 2020

HTML | Popular terms on the website

Tags post: Code, Reference 13 September 2020

Animation Collection Use Codepens

Tags post: Code, Reference 07 September 2020

Website Template Collection :

  • Free Articles | Articles and Templates Collection Artikel dan Koleksi Template Wed, 20 Oct 2021 00:11:34 +0000

    apa sih ini?
    Artikel dan Koleksi Template Mon, 18 Oct 2021 20:10:22 +0000