creativetimofficial/material-kit

Free and Open Source UI Kit for Bootstrap 5, React, Vue.js, React Native and Sketch based on Google's Material Design

Material Kit 2

Material Kit is a Free Bootstrap 5 UI Kit with a fresh, new design inspired by Google's material design. You asked for it, so we built it. It's a great pleasure to introduce to you the material concepts in an easy to use and beautiful set of components. Along with the restyling of the Bootstrap elements, you will find three fully-coded example pages, to help you design your next project.

Material Kit makes use of light, surface, and movement. It uses a deliberate color choice, edge-to-edge imagery, and large scale typography. The general layout resembles sheets of paper following multiple different layers so that the depth and order are obvious. The navigation stays mainly on the left and the actions on the right.

This new design has elements that have been the result of research regarding ink and paper and the way objects and materials interact in real life. The result is a beautiful and consistent set of elements that can get you started with your next project. Material Kit is a great tool if you are looking to create a web presence for your Android application and need to be consistent, leaving the impression of visually similar elements. It is also a great resource in its own right, looking gorgeous and helping you build your web pages.

Special thanks go to:

• Nepcha Analytics for the analytics tool. Nepcha is already integrated with Material Dashboard. You can use it to gain insights into your sources of traffic.

Table of Contents

• Material Kit 2
  • Table of Contents
  • Versions
  • Demo
  • Quick start
  • Deploy
  • Documentation
  • File Structure
  • Browser Support
  • Resources
  • Reporting Issues
  • Upgrade to PRO Version
  • Licensing
  • Useful Links
    • Social Media
• Backend logic provided by genezio

Versions

HTML	React	Vue

React Native	Figma	WordPress

Demo

Buttons	Inputs	Navbars

Login Page	Landing Page	Profile Page

View More

Quick start

• npm i material-kit
• Download from Github.
• Download from Creative Tim.
• Install with Bower: bower install material-kit.
• Clone the repo: git clone https://github.com/creativetimofficial/material-kit.git.

Deploy

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

Documentation

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

File Structure

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

material-kit
  ├── assets
  │   ├── css/
  │   ├── fonts/
  │   ├── img/
  │   ├── js
  │   │   ├── core
  │   │   ├── plugins
  │   │   └── material-kit.min.js
  │   └── scss
  │       ├── material-kit/
  │       └── material-kit.scss
  ├── docs
  │   ├── documentation.html
  ├── pages/
  ├── sections/
  ├── CHANGELOG.md
  ├── gulpfile.js
  ├── package.json
  ├── presentation.html

Browser Support

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

Resources

• Demo: https://demos.creative-tim.com/material-kit/presentation.html

• Download Page: https://www.creative-tim.com/product/material-kit

• Documentation: https://www.creative-tim.com/learning-lab/bootstrap/overview/material-kit

• License Agreement: https://www.creative-tim.com/license

• Support: https://www.creative-tim.com/contact-us

• Issues: Github Issues Page

• Nepcha Analytics - Analytics tool for your website

• Dashboards:

HTML 5	HTML 4	React	Vue	Angular

HTML Dark	Vuetify

Reporting Issues

We use GitHub Issues as the official bug tracker for the Material Kit. 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. 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.

Upgrade to PRO Version

Are you looking for more components? Please check our Premium Version of Material Kit right here.

Licensing

• Copyright 2021 Creative Tim (https://www.creative-tim.com/?ref=mk2-github-readme)

• Licensed under MIT (https://github.com/creativetimofficial/material-kit/blob/master/LICENSE.md)

Useful Links

• Tutorials
• Affiliate Program (earn money)
• Blog Creative Tim
• Free Products from Creative Tim
• Premium Products from Creative Tim
• React Products from Creative Tim
• Angular Products from Creative Tim
• VueJS Products from Creative Tim
• More products from Creative Tim
• Check our Bundles here

Social Media

Twitter: https://twitter.com/CreativeTim

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

Dribbble: https://dribbble.com/creativetim

Instagram: https://www.instagram.com/CreativeTimOfficial

TikTok: https://tiktok.com/@creative.tim

Backend logic provided by genezio

genezio is a platform that allows developers to write, deploy, and use serverless APIs with ease. With genezio, developers can write their backend logic in classes and design their frontend using their preferred programming language.

Once the backend classes are written, genezio deploys them onto a serverless infrastructure. The platform generates an SDK that developers can use to remotely call the methods of their class in a very natural way, making it easy to call backend logic from the client.

The platform comes with a handful of examples to start from, and developers can integrate it into their CI/CD pipeline with a dedicated GitHub action.

For more tutorials and details check the following resources:

• Documentation: https://github.com/creativetimofficial/black-dashboard-genezio
• Tutorials: https://genez.io/tags/tutorials/
• Examples: https://github.com/Genez-io/genezio-examples

material-kit's Issues

button click effect not working after append

When I want to add buttons to modal-footer with jquery, buttons not working like others.

Navbar Issue

Navbars with dropdowns have wrong height size:

Safari on iPad Checkbox and Radio display problem.

1- Checkbox animation and checkmark not clear at all, the checkmark looks like a line to the right edge of the checkbox itself.
2- Radio Buttons sometimes doesn't appear with an empty circle, it just shows the middle circle all the way and does not override the color when I try to do so.
3- Circular buttons with just icons, the icon is not placed correctly.

Missing navbar-transparent.html

Missing navbar-transparent.html.
This error was detected at page: components-documentation.html#navbar-row

Issues compiling with bootstrap sass

When compiling material sass files with bootstrap sass in project, font and default colors are lost.

Bootstrap Datepicker

Like:
https://eonasdan.github.io/bootstrap-datetimepicker/

Bootstrap v4

I loved your products. Thanks for that :)
Is there any plan to use Bootstrap v4?

floating label for datepicker field

floating label not working with datepicker field

Radio Button/Checkbox disappear when the radio button/checkbox is rendered using Angular ng-repeat

I'm rendering some radio buttons and checkboxes using AngularJS' ng-repeat. The labels appear fine but the circle/square to click on does not appear. On inspecting the console, I found that the

<span class="circle"></span>
<span class="check"></span>

appended after the <label> is not appended when using ng-repeat.

How should I be getting around this?

Compile errors

Hello,

Is this just for Bootstrap 3? I'm getting compile errors using v4.

Thanks, Stephen

how does material-kit marry with material-ui ?

First thank you and FezVrasta for having done such an amazing job and share with others!!!

I'm currently sourcing some frameworks for my new project. As I'm using react as the javascript framework, i'm very interested in material-ui (https://github.com/callemall/material-ui) and plan to use their awesome components.

However, there are some components that material-ui doesn't provide, or , it does provide but not something I am expecting --- good example is navibar, as I don't really like AppBar + Drawer, but prefer the 'traditional' bootstrap naviBar (but I do love the rest components!). So I decided to build my own NaviBar.

Material UI uses a inline styles for its internal components, and I find it very hard, or even impossible for me to reuse. But I want to keep my controls in the same look and feel across the site, so basically I need to source some other material UI facilities to help me with that. Material-Kit seems to be a very good candidate for that.

What I'm not quite sure , is that I feel like there are something duplicated in my code: Both material-kit and Material-UI provide their own implementation of material-ui. Duplication aside, different implementation may cause compatible issues down the track and this would impact user experience.

Any ideas/suggestions??

Dropdown Menu Stay Selected

Is there a way for the dropdown list to stay on the selected item? currently the selection does not stay, or the page posts back.

Toggle component is missing <span class="toggle"> in components documentation

The code for the Toggle component appears to be missing the need for the <span class="toggle"> within the <label> tag.

Current code listed in components:
`

Toggle is on

`

Should be:
`

Toggle is on

`

Correct?

Menu

The menu is not clickable once viewed in mobile

Input with floating label ( Mobile Safari ) Loads already Floated.

When I load up our floating labels on my Iphone using safari, on the first time it loads all the values are pre-floated, however when I refresh it all looks good and normal.

Is this a known quirk or is the css/js not loading fast enough?

Thanks again for the killer theme !

Input type is email for name in send message and it should be text at landing page example

I already fix the issue and did a pull request

Only one slider per page working

When you try to add more than one slider to a page, only the first appears. For some reason the id for a slider must = "sliderRegular" for it to work

checkbox JS styling doesnt apply when in modal (ajax)

Is there a JS function to call after a modal load, when there are some Material-kit-styled Checkboxes?

I'm opening a modal which content is loaded by Ajax... and the styles which are usually applied by JS on dom ready aren't applied when the content (ajax loaded) is in a modal.

Dropdown Submenu

How i add???

License is useless

IANAL

I was thinking about using this for an open-source project (AGPLv3 back-end, not sure what to do about the front-end yet), but the licensing is far too ambiguous. Without the GPL exceptions (I'll get to that), the license is pretty clearly non-free. It forbids redistribution, and derivative works are questionable at best.

The rights and restrictions sections seem contradictory; apparently people are allowed to "use" the theme, but not redistribute it. Since this visiting a web site which uses a them triggers redistribution, I guess it's only possible to look at your own creation, but not actually make it available on the web.

Interestingly, the document doesn't appear to actually grant any license whatsoever; it merely describes the conditions for whichever license (personal or developer) was purchased. Are you trying to grant a personal license, a developer license, or neither?

There are no definitions for important terms like "item" or "resource". I really have no idea how all this applies to either material-kit or anything using it… is the item material-kit, or the combination of material-kit and the project using it, or part of material-kit (like the JS or CSS)? The license even seems to try to treat material-kit as a single work, and the personal license specifically forbids breaking it up, but there are at least two files (one CSS and one JS) which must be kept separate to work correctly.

It seems like anyone using this project is relying on the good faith of the copyright holders rather than the license. While I do believe in that good faith (i.e., I don't think you'll go around filing lawsuits against people who use this for a blog or something), it would be very irresponsible to take the risk, which brings me to the GPL stuff:

If the item was created using materials which are the subject of a GNU General Public Li-
cense (GPL), your use of the item is subject to the terms of the GPL in place of the foregoing
conditions (to the extent the GPL applies).

AFAICT, you're trying to allow GPL'd projects to use material-kit under the terms of the GPL instead of your license, which is great.

First off, "a GNU General Public License" could quite reasonably be interpreted to mean the Lesser GPL (v2.1 or 3), Library GPL, GNU Affero GPL in addition to the "main" GPLv1/2/3. It would probably be a good idea to borrow some language from the FSF's suggested notice.

What is the "item" here? Is it material-kit, or the combined work created by merging material-kit with the code using it? It seems like you want it to mean the latter the second time you use "item", but that doesn't really make sense for the first use. AFAICT, the only consistent reading is the former, which would mean the entire amalgamated project must be "subject to the terms of the GPL". In that case, every project actually using this is violating the license… bootstrap is MIT licensed. You're free to include MIT-licensed code like bootstrap in a GPL (or proprietary) project, but that doesn't change its license to GPL (and, since you don't own the copyright, you have no right to do so). That means there is no way to comply with the license.

The common way to do this is dual-licensing; allow people to use material-kit under the terms of the GPL or purchase a license from you so they can use it in proprietary code. I suggest you consider doing that instead of saying everything has to be GPL'd.

Even with dual-licensing, there are a lot of issues with using the GPL for something like this. The obvious one is whether running GPL'd javascript code in a non-GPL-compatible browser is even allowed, which is a question I don't think has ever been resolved. The FSF's stance about running non-GPL code in a GPL interpreter seems to indicate that it's not, but of course that's not legally binding…

So, my reading of this is basically

• There is no actual grant of a personal or developer license.
• Even if there were, those licenses are ambiguous and contain contradictory provisions.
• It's impossible to comply with the conditions for using this under the terms of the GPL (at least without rewriting bootstrap and releasing that under the GPL, in addition to anything else I may want to use such as jquery, font awesome, web fonts, etc.).
• Even if I could get all material-kit's code under "the" GPL, I would still have some pretty major reservations, but that's really a separate issue.

less files?

could you please include the less-files also into your repo?

Read-only input fields

Read-only input fields look absolutely the same way as active fields.

Issue with Radio Button Animation

If you'll notice immediately after click, the circle doesn't fully form. Instead the bottom and right "sides" of the circle end up being straight edges; however, they do eventually flesh out to form a circle.

Using Firefox 46.0.1

"antialiasing" of active toggle-button in Chrome

make it available from CDN

Copying an import link would be so much more convenient than downloading your zip.

.container within .main-raised causes horizontal scroll due to .main-raise l/r margin

For the Bootstrap 3 version of material-kit:

.main-raised needs customized .container sizes due to .main-raised adding 30 px of margin left/right, but .container having set, hard widths at various media queries. Screenshot:

The solution is a set of .container sizes per media query inside .main-raised that are 60px (30px left margin, 30px right margin) smaller.

Dropdown issue in navbar

I've just bought the bootstrap material pro kit and I have an issue trying to integrate it with angular2.

It doesn't work even if I added the arrive.js library.

And also I receive this in console when adding the nouislider.min.js:

nouislider.min.js:10 Uncaught TypeError: Cannot set property 'Link' of undefined(anonymous function) @ nouislider.min.js:10800 @ nouislider.min.js:10
webpack_require @ bootstrap eaef8bc…:
500 @ main.browser.ts:65__webpack_require__ @ bootstrap eaef8bc…:
50webpackJsonpCallback @ bootstrap eaef8bc…:
21(anonymous function) @ main.bundle.js:2

I would much appreciate you helping me to figure out the problem. Thanks

No UI for File inputs

no ui shown for file inputs .if i use following code , there no ui shown. it shows only normal file input without proper alignment.

Issue with Checkbox Animation

On click for check or uncheck on either of the 2 clickable boxes, the animation bubble appears much lower than it should.

Using Firefox 46.0.1

Changing Color

Is there a direct way to change the purple color used througout the template without having to modify all the places where it appears in the css file?

bootstrap-select

Like:
https://silviomoreto.github.io/bootstrap-select/examples/

Can we use this theme with angularJs?

I want to use material-kit with angularJs .
When Page loads in a ui-view , material-kit functions dont work (ripple-container, float input etc. ) styles are not loading.

Checkbox with zoom in Chrome

Changing Variables and Compiling

Hello, Im new to SCSS and am unsure of how does it work. Im currently using atom.
I have tried to change the primary colour to $light-blue and have tried to compile but there is an error saying 'node-sass' is not recognized as an internal or external command, operable program or batch file.

May i know is there any possibility that i could change all scss files to css files to work on or must it be scss?

rtl version

do you have any plan for rtl version?

Meteor Project

I am trying to use material kit pro in my meteor project, I have tried adding the assets folder in client/lib folder but the libraries are not loaded like this, could you please give some indicators how to use the kit in a meteor projects.

Missing cards

Where are the cards? Main component of material kit probably :'(

bower?

please add bower file

parallax on index page disables when removing the sliders

Hi there,
I started my development, based upon the index-template.
When I remove the slides that were added on the page, the parallax effect is lost.
I solved this by putting it in a display:hidden-div, but seems strange...
Any idea how I could solve this? I like the kit very much!
Best regards and thanks for your help.
Stijn

Issue with JSTree

Hi,

You have a really good product which looks great, but I have a problem with a couple of problems with other add ons that use floating panels. I believe you have a fix to get the latest version of the bootstrap-datepicker working, but I have a similar problem wherein the context sensitive menus in JsTree (https://www.jstree.com/) don;t appear when your library is loaded.

Any ideas for a workaround?

Thanks
Liam

dropdown-menu position

I want the dropdown menu to open on left side. When I add .dropdown-menu-left or .pull-left class to the .dropdown-menu, happen nothing.

Please, use another datepicker plugin

The datepicker plugin that you guys chose seems to be abandoned. There's many others that are being maintained actively and offer more options (localization for example). I suggest to change the datepicker plugin to https://github.com/eternicode/bootstrap-datepicker.

Sidebar issue

On components page in compact mode ( small or extra-small ) sidebar should mot be fixed at top

Missing List Group Colors

Cruising through some code and I notice some colors are missing

.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover { z-index: 2; color: #fff; background-color: #337ab7; border-color: #337ab7; }

Add install with npm option

Add install with npm option

Is this compatible with React Bootstrap?

Is this compatible with React Bootstrap? (https://react-bootstrap.github.io)

No UI for <select>

Hi, seems like there's no material ui for the <select> tag, or is there? The docs do not mention it.
Thanks.

Browser support?

What browsers ( / versions) are supported?

Size modifiers for "just-icon" buttons

If i add class btn-xs, btn-sm it won't affect button with styles like this: btn btn-just-icon btn-round; and btn-lg affects it wrong way. Fix, please.

Issue with smaller screens