❤️ Creative Tim Club - Access all our Present & Future Premium Products

Free MUI & ReactJS UI Kit

Product description


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.

Documentation built by Developers

Each element is well presented in very complex documentation. You can read more about the documentation here.

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.

Helpful Links

Product certified by: Creative Tim
Material Kit 2 React - Fully Coded and Responsive HTML5
Material Kit 2 React - JavaScript library for building user interfaces
Material Kit 2 React - Figma Files for Professional Designers
Downloads
104,606
Version
2.1.0
Changelog
Updated
11 months ago
Released
5 years ago
Reviews
Star
Handcrafted Elements
40
Customized Plugins
5
Example Pages
4
Community Support
Documentation
Fully Responsive

Upgrade to PRO Version

Get more power with Material Kit 2 PRO React. It has a lot more features compared to the free version. We hope you will create awesome websites/templates with this product!

What is in Demo? What is in PRO Version?
Elements 40 100
Plugins 5 10
Examples Pages 4 18
Full Coded
Documentation
SASS Files
Designer Files
Premium Support

We are here to help you!

127 Web Developers commented on this product

meredith
  • downloaded
5 years ago

Can you explain me why should one use this kit instead of material-ui? In docs it says: // instead of importing the item from material-ui import Grid from 'material-ui/Grid'; // you would import our component like this import GridItem from "components/Grid/GridItem.jsx"; So why should I not import Grid from material-ui? It looks like they're the same. I just prefer material-ui way and have all free components in a single website.

ctmployee
  • downloaded

Hello @meredith . It is because we have changed their styles. But if you like better the styles that come from Material-UI, please go ahead and use them. If you want something a bit more stylish you can use our product. Best, Manu.
5 years ago

juanlopera
  • downloaded
5 years ago

Hi, Thank you for this interesting and good looking components, i've been learning reactjs since the last week and i'm very interested in some of your coding approach and haven't been able to understand one thing that's driving me crazy and maybe you could release me from my craziness. How is that you could import your modules without using the "./" (dot slash) notation? and how do you manage to import images also without the ./ or the complete relative path? you just use assets/subfolders/etc/etc from any location? thanks in advance for any help and knowledge Regards, Juan

ctmployee
  • downloaded

Hello there @juanlopera and thank you for your interest in using our product. We've just set all paths to go inside the src folder. Please see the .env file inside the product. Best, Manu.
5 years ago

anastasioshomaidis
  • downloaded
5 years ago

How can i use the kit in an existing project ? Is there a way to add it with npm ?

ctmployee
  • downloaded

Hello there @anastasioshomaidis and thank you for your interest in using our product. Yes, the product is on npm, just use `npm install --save material-kit-react`. It should do the trick Best, Manu.
5 years ago

anastasioshomaidis
  • downloaded
5 years ago

@ctmployee thanks

igboanugwomart
  • downloaded

jjjj
5 years ago

giorandzj3
  • downloaded
5 years ago

Hi, thanks for your theme. It looks great. quick question: how can I add a different font to the project? thanks

ctmployee
  • downloaded

Hello there @giorandzj3 . Thank you for your interest in working with our product. The font is set inside: src/assets/scss/core/_misc.scss . Best, Manu.
5 years ago

wmaz93
  • downloaded
5 years ago

@ctmployee Hi Sir, I cannot seems to find how to change to brand text(Material Kit React) in Header to image in documentation. Helps is very appreciated.

ctmployee
  • downloaded

Hello there @wmaz93 and thank you for your interest in working with our products. The brand text is set by the `brand` property. Something like this: <Header brand="This is my Text" ... /> . Hope this information helps you. Best, Manu.
5 years ago

lziegenhirt
  • downloaded
5 years ago

having trouble adding the react kit to an existing NEXT.JS project. Lots of compilation errors. also Tried adding the lirbary on npm to the project, that seems to be different source that what's on the kit. Again many compilation errors. Are there any step by step instructions available? Thx.

ctmployee
  • downloaded

Hello there @lziegenhirt . Thank you for your interest in working with our product. Here is a link that I believe it will help you: https://github.com/creativetimofficial/ct-material-dashboard-pro-react/issues/72 . Best, Manu.
5 years ago

yasseratoie
  • downloaded
5 years ago

Hi, can you tell me how to import to our existing project? i saw your documentation but it is not explaining. when I copy all assets and components to my project, it gives us error about path. thanks

ctmployee
  • downloaded

Hello there @yasseratoie and thank you for your interest in working with our products. Here you have a link on one of our tutorials, maybe this will help you: https://medium.freecodecamp.org/how-to-use-reactjs-with-webpack-4-babel-7-and-material-design-ff754586f618 . Also, please check our live docs here: https://demos.creative-tim.com/material-kit-react/#/documentation/tutorial . Best, Manu.
5 years ago

raymondadutwum
  • downloaded
5 years ago

i love this

ameyaai1990
  • downloaded
5 years ago

Hi Tim, Every time use npm run build it is giving an error Module not found: Error: Can't resolve 'routes/index.jsx' in '/home/ap/RBweb/react-theme/src and this goes on and on for each and every import statement. Is there some step that I am missing? Please guide.

ctmployee
  • downloaded

Hello there @ameyaai1990 and thank you for your interest in working with our products. Can you open an issue here: https://github.com/creativetimofficial/material-kit-react . And please, use the given ISSUES_TEMPLATE. Best, Manu.
5 years ago

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