Home
Application and Data
Languages & Frameworks
Front-End Frameworks

Material Kit vs Material-UI

Need advice about which tool to choose?Ask the StackShare community!

Material Kit
27
84
+ 1
0
Material-UI
1.7K
3.4K
+ 1
412
Add tool

Material Kit vs Material-UI: What are the differences?

What is Material Kit? *Free Bootstrap UI Kit Based on Material Design *. Material Kit is a Free Bootstrap 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.

What is Material-UI? React components for faster and easier web development. Build your own design system, or start with Material Design. React components for faster and easier web development. Build your own design system, or start with Material Design.

Material Kit and Material-UI can be primarily classified as "Front-End Frameworks" tools.

Material Kit and Material-UI are both open source tools. Material-UI with 48.6K GitHub stars and 11K forks on GitHub appears to be more popular than Material Kit with 5.11K GitHub stars and 511 GitHub forks.

Advice on Material Kit and Material-UI
Kanit Ganhakiti
| 3 upvotes · 534.3K views
Needs advice
on
Ant DesignAnt DesignMaterial-UIMaterial-UI
and
Next.jsNext.js

Hi, I start building an admin dashboard with next.js and looking for a frontend framework ( components ready ). So I end up with Ant Design and Material-UI, but I never built a project with these two.

Here is a list of my requirements.

  1. Good documentation.
  2. easy CRUD ( date picker and date range picker bundled )
  3. built-in multi-lang feature or Great 3rd library support
  4. Admin dashboard template
  5. well code maintenance

Which is better for the long run?

See more
Replies (2)
vuquangthinh
| 4 upvotes · 85.3K views
Recommends

I'm using both of them. But If you want to create admin dashboard, You should try AntDesign. They (Alibaba / Taobao) created a group of UI libaries to create admin dashboard. It's production ready. https://procomponents.ant.design/en-US/components/table https://pro.ant.design/docs/layout In my opinion, If you want to create a dashboard with mobile first / simple dashboard, you can choice material ui. otherwise, antdesign is better (if you want focus on desktop /tablet ui). Some of skeleton has built with material ui such as react-admin is good point to start. But if you want to create admin site with antdesign, I think you should build with umijs (it is alternative and compatible with nextjs and antd support directlly)

See more
Irving Caamal
Mid Level Software Engineer at Fullstacklabs · | 2 upvotes · 86.7K views
Recommends

https://github.com/uber/baseweb I highly recommend you baseweb, it's easy and very customizable and also beautiful.

See more
Decisions about Material Kit and Material-UI
Kexin Lin
at University of Toronto · | 8 upvotes · 215.8K views
Chose
Material-UIMaterial-UI
over
BootstrapBootstrap
at

I replaced Bootstrap with Material-UI during the front-end UI development, because Material-UI adopts a component-based importing style, making it suit well in a "React programming style". This makes me comfortable when programming because I can treat importing UI components as other React components I define.

See more
Xinyi Liu
Software Developer at BigClarity · | 6 upvotes · 282.9K views
Chose
CSS 3CSS 3HTML5HTML5Material-UIMaterial-UITailwind CSSTailwind CSS
at
()

As our team will be building a web application, HTML5 and CSS3 are one of the standardized combinations to implement the structure and the styling of a webpage. Material-UI comes with all sorts of predesigned web components such as buttons and dropdowns that will save us tons of development time. Since it is a component library designed for React, it suits our needs. However, we do acknowledge that predesigned components may sometimes cause pains especially when it comes to custom styling. To make our life even easier, we also adopted Tailwind CSS. It is a CSS framework providing low-level utility classes that will act as building blocks when we create custom designs.

See more
Abigail Watson
| 2 upvotes · 598.6K views
Chose
Material-UIMaterial-UI
over
BootstrapBootstrap
at
()

Fonts and typography are fun. Material Design is a framework (developed by Google) that basically geeks out on how to assemble your typographical elements together into a design language. If you're into fonts and typography, it's fantastic. It provides a theming engine, reusable components, and can pull different user interfaces together under a common design paradigm. I'd highly recommend looking into Borries Schwesinger's book "The Form Book" if you're going to be working with Material UI or are otherwise new to component design.

https://www.amazon.com/Form-Book-Creating-Printed-Online/dp/0500515085

See more
Get Advice from developers at your company using StackShare Enterprise. Sign up for StackShare Enterprise.
Learn More
Pros of Material Kit
Pros of Material-UI
    Be the first to leave a pro
    • 132
      React
    • 82
      Material Design
    • 57
      Ui components
    • 28
      CSS framework
    • 23
      Component
    • 14
      Looks great
    • 10
      Good documentation
    • 10
      Responsive
    • 9
      LESS
    • 7
      Ui component
    • 7
      Open source
    • 6
      Code examples
    • 5
      Flexible
    • 4
      JSS
    • 3
      Angular
    • 3
      Very accessible
    • 3
      Fun
    • 3
      Supports old browsers out of the box
    • 2
      Interface
    • 2
      Designed for Server Side Rendering
    • 1
      Easy to work with
    • 1
      Css

    Sign up to add or upvote prosMake informed product decisions

    Cons of Material Kit
    Cons of Material-UI
      Be the first to leave a con
      • 31
        Hard to learn. Bad documentation
      • 25
        Hard to customize
      • 19
        Hard to understand Docs
      • 6
        Extra library needed for date/time pickers
      • 6
        Bad performance
      • 5
        For editable table component need to use material-table

      Sign up to add or upvote consMake informed product decisions

      What is Material Kit?

      Material Kit is a Free Bootstrap 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.

      What is Material-UI?

      Material UI is a library of React UI components that implements Google's Material Design.

      Need advice about which tool to choose?Ask the StackShare community!

      Jobs that mention Material Kit and Material-UI as a desired skillset
      Salesforce Engineer
      LaunchDarkly
      - US
      View Job Details
      GoogleVisualforceage+14
      Salesforce Engineer
      LaunchDarkly
      - US
      View Job Details
      GoogleVisualforceage+14
      What companies use Material Kit?
      What companies use Material-UI?
        No companies found
        See which teams inside your own company are using Material Kit or Material-UI.
        Sign up for StackShare EnterpriseLearn More

        Sign up to get full access to all the companiesMake informed product decisions

        What tools integrate with Material Kit?
        What tools integrate with Material-UI?

        Sign up to get full access to all the tool integrationsMake informed product decisions

        What are some alternatives to Material Kit and Material-UI?
        Bootstrap
        Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
        Material Design for Angular
        Material Design is a specification for a unified system of visual, motion, and interaction design that adapts across different devices. Our goal is to deliver a lean, lightweight set of AngularJS-native UI elements that implement the material design system for use in Angular SPAs.
        Animate.css
        It is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.
        Tailwind CSS
        Tailwind is different from frameworks like Bootstrap, Foundation, or Bulma in that it's not a UI kit. It doesn't have a default theme, and there are no build-in UI components. It comes with a menu of predesigned widgets to build your site with, but doesn't impose design decisions that are difficult to undo.
        Nuxt.js
        Nuxt.js presets all the configuration needed to make your development of a Vue.js application enjoyable. You can use Nuxt.js for SSR, SPA, Static Generated, PWA and more.
        See all alternatives

        Related Comparisons

        Bootstrap vs Material-UI vs Semantic UIMaterial-UI vs MaterializeBootstrap vs Material Design for Bootstrap vs Material-UIBootstrap vs Material-UI vs MaterializeBootstrap vs Material Design Lite vs Material-UI

        Trending Comparisons

        Django vs Laravel vs Node.jsBootstrap vs Foundation vs Material-UINode.js vs Spring BootFlyway vs LiquibaseAWS CodeCommit vs Bitbucket vs GitHub

        Top Comparisons

        Bitbucket vs GitHub vs GitLabHipChat vs Mattermost vs SlackPostman vs Swagger UIBootstrap vs Materialize