Material-UI

> MUI v5 is out! ✨ Check out the latest documentation [here](https://mui.com/).

[React](https://reactjs.org/) components for faster and simpler web development. Build your own design system, or start with [Material Design](https://material.io/design/introduction/). [![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/mui-org/material-ui/blob/master/LICENSE) [![npm latest package](https://img.shields.io/npm/v/@material-ui/core/latest.svg)](https://www.npmjs.com/package/@material-ui/core) [![npm next package](https://img.shields.io/npm/v/@material-ui/core/next.svg)](https://www.npmjs.com/package/@material-ui/core) [![npm downloads](https://img.shields.io/npm/dm/@material-ui/core.svg)](https://www.npmjs.com/package/@material-ui/core) [![CircleCI](https://img.shields.io/circleci/project/github/mui-org/material-ui/next.svg)](https://app.circleci.com/pipelines/github/mui-org/material-ui?branch=next) [![Coverage Status](https://img.shields.io/codecov/c/github/mui-org/material-ui/next.svg)](https://codecov.io/gh/mui-org/material-ui/branch/next) [![Follow on Twitter](https://img.shields.io/twitter/follow/MaterialUI.svg?label=follow+Material-UI)](https://twitter.com/MaterialUI) [![Dependabot Status](https://api.dependabot.com/badges/status?host=github&repo=mui-org/material-ui)](https://dependabot.com) [![Average time to resolve an issue](https://isitmaintained.com/badge/resolution/mui-org/material-ui.svg)](https://isitmaintained.com/project/mui-org/material-ui 'Average time to resolve an issue') [![Crowdin](https://badges.crowdin.net/material-ui-docs/localized.svg)](https://translate.material-ui.com/project/material-ui-docs) [![Open Collective backers and sponsors](https://img.shields.io/opencollective/all/material-ui)](https://opencollective.com/material-ui)

## Installation Material-UI is available as an [npm package](https://www.npmjs.com/package/@material-ui/core). ```sh // with npm npm install @material-ui/core // with yarn yarn add @material-ui/core ``` Head to the [v4 documentation](https://v4.mui.com/) for more details.

Older versions

- **[v3.x](https://v3.material-ui.com/)** ([Migration from v3 to v4](https://mui.com/guides/migration-v3/)) - **[v0.x](https://v0.material-ui.com/)** ([Migration to v1](https://mui.com/guides/migration-v0x/))

## Who sponsors Material-UI? ### Diamond 💎

Diamond Sponsors are those who have pledged \$1,500/month or more to Material-UI. ### Gold 🏆 via [Patreon](https://www.patreon.com/oliviertassinari)

via [OpenCollective](https://opencollective.com/material-ui)

Direct

Gold Sponsors are those who have pledged \$500/month or more to Material-UI. ### There is more! See the full list of [our backers](https://mui.com/discover-more/backers/). ## Usage Here is a quick example to get you started, **it's all you need**: ```jsx import React from 'react'; import ReactDOM from 'react-dom'; import Button from '@material-ui/core/Button'; function App() { return ; } ReactDOM.render(, 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](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/4j7m47vlm4) ## Questions For _how-to_ questions and other non-issues, please use [StackOverflow](https://stackoverflow.com/questions/tagged/material-ui) 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](https://mui.com/getting-started/example-projects/). ## Documentation Check out our [documentation website](https://mui.com/). ## Premium Themes You can find complete templates & themes in the [Material-UI store](https://mui.com/store/?utm_source=docs&utm_medium=referral&utm_campaign=readme-store). ## Contributing Read the [contributing guide](/CONTRIBUTING.md) to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to Material-UI. Notice that contributions go far beyond pull requests and commits. Although we love giving you the opportunity to put your stamp on Material-UI, we also are thrilled to receive a variety of [other contributions](https://mui.com/getting-started/faq/#material-ui-is-awesome-how-can-i-support-the-project). ## Changelog If you have recently updated, please read the [changelog](https://github.com/mui-org/material-ui/releases) for details of what has changed. ## Roadmap The future plans and high priority features and enhancements can be found in the [roadmap](https://mui.com/discover-more/roadmap/) file. ## License This project is licensed under the terms of the [MIT license](/LICENSE). ## Sponsoring services These great services sponsor Material-UI's core infrastructure: [

](https://github.com/) GitHub allows us to host the Git repository. [

](https://circleci.com/) CircleCI allows us to run the test suite. [

](https://www.netlify.com/) Netlify allows us to distribute the documentation. [ CrowdIn

](https://crowdin.com/) CrowdIn allows us to translate the documentation. [

](https://www.browserstack.com/) BrowserStack allows us to test in real browsers. [

](https://codecov.io/) CodeCov allows us to monitor the test coverage.

	Stars	Issues	Version	Updated	Created
@emotion/css			11.11.2	a year ago	6 years ago
@material-ui/core	91,678	1,790	4.12.4	2 years ago	6 years ago
material-ui	91,686	1,792	0.20.2	6 years ago	10 years ago
styled-components	40,100	251	6.1.9	a day ago	8 years ago

@emotion/css vs @material-ui/core vs material-ui vs styled-components

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past