@material-ui/core

MUI (formerly Material-UI) is the React UI library you always wanted. Follow your own design system, or start with Material Design.

Showing:

Popularity

Downloads/wk

2.2M

GitHub Stars

72.2K

Maintenance

Last Commit

2d ago

Contributors

2,553

Package

Dependencies

12

License

MIT

Type Definitions

Built-In

Tree-Shakeable

Yes?

Reviews

Average Rating

4.6/5650
Read All Reviews
liorgrossman
parimalyeole1
zeropaper
sneha-subramannian
Mohammedajzal
shafayet1404052
chase2981

Top Feedback

103Great Documentation
88Easy to Use
76Highly Customizable
49Performant
46Responsive Maintainers
35Bleeding Edge

Readme

MUI logo

MUI

Quickly build beautiful React apps. MUI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.

license npm latest package npm next package npm downloads CircleCI Coverage Status Follow on Twitter Renovate status Average time to resolve an issue Crowdin Open Collective backers and sponsors

Installation

MUI is available as an npm package.

Stable channel v5

// with npm
npm install @mui/material @emotion/react @emotion/styled

// with yarn
yarn add @mui/material @emotion/react @emotion/styled
Older versions

Please note that @next will only point to pre-releases; to get the latest stable release use @latest instead.

Who sponsors MUI?

Diamond 💎

octopus doit-intl aptugo

Diamond Sponsors are those who have pledged \$1,500/month or more to MUI.

Gold 🏆

via Patreon

tidelift bitsrc Next gen digital product studio.

via OpenCollective

call-em-all hoodiebees Screen recorder for Mac

Direct

elevator

Gold Sponsors are those who have pledged \$500/month or more to MUI.

There is more!

See the full list of our backers.

Usage

Here is a quick example to get you started, it's all you need:

import React from 'react';
import ReactDOM from 'react-dom';
import Button from '@mui/material/Button';

function App() {
  return (
    <Button variant="contained" color="primary">
      Hello World
    </Button>
  );
}

ReactDOM.render(<App />, document.querySelector('#app'));

Yes, it's really all you need to get started as you can see in this live and interactive demo:

Edit Button

Questions

For how-to questions and other non-issues, please use StackOverflow instead of GitHub issues. There is a StackOverflow tag called "material-ui" that you can use to tag your questions.

Examples

Are you looking for an example project to get started? We host some.

Documentation

Check out our documentation website.

Premium Themes

You can find complete templates & themes in the MUI store.

Contributing

Read the contributing guide to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to MUI.

Notice that contributions go far beyond pull requests and commits. Although we love giving you the opportunity to put your stamp on MUI, we also are thrilled to receive a variety of other contributions.

Changelog

If you have recently updated, please read the changelog for details of what has changed.

Roadmap

The future plans and high priority features and enhancements can be found in the roadmap file.

License

This project is licensed under the terms of the MIT license.

Sponsoring services

These great services sponsor MUI's core infrastructure:

GitHub

GitHub allows us to host the Git repository and coordinate contributions.

Netlify

Netlify allows us to distribute the documentation.

CrowdIn

CrowdIn allows us to translate the documentation.

BrowserStack

BrowserStack allows us to test in real browsers.

CodeCov

CodeCov allows us to monitor the test coverage.

Rate & Review

Great Documentation103
Easy to Use88
Performant49
Highly Customizable76
Bleeding Edge35
Responsive Maintainers46
Poor Documentation3
Hard to Use0
Slow8
Buggy1
Abandoned0
Unwelcoming Community0
100
Lior GrossmanSan Francisco26 Ratings11 Reviews
Founder & CEO of Openbase
July 8, 2020
Easy to Use
Great Documentation

Probably one of the best UI libraries out there today! (with few small downsides) Material UI offers countless components, and its design language is based on Google's Material UI. It's very mature nowadays, so components are highly customizable and you can do just about everything with them. There's an OK support for theming (and you can every create a dark theme), however, if you need granular support over the UI of the components, this is probably not for you. Also, since Material Design makes heavy use of shadows, transitions and effects, Material UI isn't the most lightweight library and this can affect the perceived responsiveness of your app. Nevertheless, it offers the ability to create a modern, beautiful UI with minimal code, and the documentation is sublime, so IMHO it's still worth it.


1
lamontadams
Parimal YeolePune73 Ratings81 Reviews
Lang :Node[TS,JS] | Dart | Go | Haskell DB: Mongo | Postgres | Redis | DynamoDb | ElasticSearch Acrhitecture: Micro-service | Serverless AWS Certified
7 months ago
Responsive Maintainers
Highly Customizable
Performant
Great Documentation
Bleeding Edge

Lots of different components library and UI philosophy available for reactis nowadays. In frontend ever growing world, it's hard to work with all those packages. But for me Material UI is go to library for reactis or nextjs project. - It has long list of components. - Good typescript support - highly customisable due to theme. - css in js is awesome - all comments are aligned to google material philosophy - all components are highly customisable for custom design - good grid system built on flexbox Most of all, most loved and maintained UI component library around from 1st react wave.


0
Valentin VagoBerlin1 Rating1 Review
Started writing JS, CSS and HTML when it was making sense to mention that the website was Netscape and IE compatible.
1 year ago
Great Documentation
Performant
Highly Customizable
Responsive Maintainers

Two years of building UIs with that project and I'm so happy about that rock solid library. Its documentation is exhaustive, clear and comes with a lot of good practices about accessibility. The customization may be its only little quirk because it's extremely flexible and the right way to achieve your goals needs to develop a feeling. The generated DOM might also be somewhat heavy but at execution the user won't feel a thing.


0
sneha v24 Ratings28 Reviews
Computer science passionate
12 days ago
Great Documentation
Easy to Use

One of the library I have used more. Its very simple to build we applications with less effort and with less design thinking . Almost most commonly used components are there in material UI with well documentation. Recently I created a component manually with more effort and when i go through the material UI documentation i found the same component there with more efficient. And still updating with new components. And making the dark mode is simple if we are following the correct procedure . And it provides best way to make the website responsive .


3
crazyankit2470
ankitiv
vaniakaashvani
Mohammedajzal8 Ratings43 Reviews
5 days ago
Easy to Use
Performant
Great Documentation
Highly Customizable
Bleeding Edge

I've been a Ui designer for a while and Material Design system has helped me a lot in developing UI's and I still use their libraries and select colors from their material pallete which helps me to kickstart my project and it's well documented too, It helped me a lot to Start my design career


3
IT2k19
salihch
Anugeeth

Alternatives

No alternatives found