Material-UI logo

Material-UI

[React](http://facebook.github.io/react/) components that implement [Google's Material Design](https://www.google.com/design/spec/material-design/introduction.html). [![npm package](https://img.shields.io/npm/v/@material-ui/core/latest.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/master.svg)](https://circleci.com/gh/mui-org/material-ui/tree/master) [![Gitter](https://img.shields.io/badge/gitter-join%20chat-f81a65.svg)](https://gitter.im/callemall/material-ui?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) [![Coverage Status](https://img.shields.io/codecov/c/github/mui-org/material-ui/master.svg)](https://codecov.io/gh/mui-org/material-ui/branch/master) [![CII Best Practices](https://bestpractices.coreinfrastructure.org/projects/1320/badge)](https://bestpractices.coreinfrastructure.org/projects/1320) ![Code style](https://img.shields.io/badge/code_style-prettier-ff69b4.svg) [![Follow on Twitter](https://img.shields.io/twitter/follow/MaterialUI.svg?label=follow+Material-UI)](https://twitter.com/MaterialUI) [![PeerDependencies](https://img.shields.io/david/peer/mui-org/material-ui.svg)](https://david-dm.org/mui-org/material-ui?type=peer&path=packages/material-ui) [![Dependencies](https://img.shields.io/david/mui-org/material-ui.svg)](https://david-dm.org/mui-org/material-ui?path=packages/material-ui) [![DevDependencies](https://img.shields.io/david/dev/mui-org/material-ui.svg)](https://david-dm.org/mui-org/material-ui?type=dev) [![Average time to resolve an issue](http://isitmaintained.com/badge/resolution/mui-org/material-ui.svg)](http://isitmaintained.com/project/mui-org/material-ui "Average time to resolve an issue") [![Crowdin](https://d322cqt584bo4o.cloudfront.net/material-ui-docs/localized.svg?cache=v1)](https://translate.material-ui.com/project/material-ui-docs)
## Installation Material-UI is available as an [npm package](https://www.npmjs.com/package/@material-ui/core). **[Stable channel v3](https://material-ui.com/)** ```sh // with npm npm install @material-ui/core // with yarn yarn add @material-ui/core ``` **[Next channel v4.0.0-alpha](https://next.material-ui.com/)** ```sh // with npm npm install @material-ui/core@next // with yarn yarn add @material-ui/core@next ``` **[v0.x](https://v0.material-ui.com/)** ([Migration to v1](https://material-ui.com/guides/migration-v0x/)) ```sh // with npm npm install material-ui // with yarn yarn add material-ui ``` Please note that `@next` will only point to pre-releases; to get the latest stable release use `@latest` instead. ## Supporting Material-UI Material-UI is an MIT-licensed open source project. It's an independent project with ongoing development made possible thanks to the support of these awesome [backers](/BACKERS.md). If you'd like to join them, please consider: - [Become a backer or sponsor on Patreon](https://www.patreon.com/oliviertassinari). - [Become a backer or sponsor on OpenCollective](https://opencollective.com/material-ui). #### What's the difference between Patreon and OpenCollective? Funds donated via Patreon directly support [Olivier Tassinari](https://github.com/oliviertassinari)'s work on Material-UI. Funds donated via OpenCollective are managed transparently and will be used for compensating work and expenses for core team members. Your name/logo will receive proper recognition and exposure by donating on either platform. ### Gold Sponsors Gold Sponsors are those who have pledged $500/month and more to Material-UI. via [Patreon](https://www.patreon.com/oliviertassinari)

creative-tim tidelift bitsrc

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

callemall localize yakaz zinggrid

### There is more! See the full list of [our backers](https://material-ui.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](http://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://material-ui.com/getting-started/example-projects/). ## Documentation Check out our [documentation website](https://material-ui.com/). ## Contributing We'd greatly appreciate any [contribution](/CONTRIBUTING.md) you make. :) ## Changelog Recently Updated? Please read the [changelog](https://github.com/mui-org/material-ui/releases). ## Roadmap The future plans and high priority features and enhancements can be found in the [ROADMAP.md](https://material-ui.com/discover-more/roadmap/) file. ## Thanks Material-UI is only made possible thanks to these great services that sponsor our 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. [](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. ## License This project is licensed under the terms of the [MIT license](/LICENSE). ## Security To report a security vulnerability, please use the [Tidelift security contact](https://tidelift.com/security). Tidelift will coordinate the fix and disclosure.