[React](http://facebook.github.io/react/) components that implement [Google's Material Design](https://www.google.com/design/spec/material-design/introduction.html).
[](https://www.npmjs.com/package/@material-ui/core)
[](https://www.npmjs.com/package/@material-ui/core)
[](https://circleci.com/gh/mui-org/material-ui/tree/v1-beta)
[](https://gitter.im/callemall/material-ui?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
[](https://codecov.io/gh/mui-org/material-ui/branch/v1-beta)
[](https://bestpractices.coreinfrastructure.org/projects/1320)
[](https://twitter.com/MaterialUI)
[](https://david-dm.org/mui-org/material-ui#info=peerDependencies&view=list)
[](https://david-dm.org/mui-org/material-ui)
[](https://david-dm.org/mui-org/material-ui#info=devDependencies&view=list)
[](http://isitmaintained.com/project/mui-org/material-ui "Average time to resolve an issue")
## Installation
Material-UI is available as an [npm package](https://www.npmjs.com/package/@material-ui/core).
**[Stable channel v1](https://material-ui.com/)**
```sh
// with npm
npm install @material-ui/core
// with yarn
yarn add @material-ui/core
```
**[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).
Your contributions, donations, and sponsorship allow us to build a sustainable organization. They directly support office hours, continued enhancements, great documentation and learning materials!
### 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 also support Olivier, but will be shared amongst other contributors and pay for operating expenses.
These funds are managed transparently through the OpenCollective website.
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)
#### via [OpenCollective](https://opencollective.com/material-ui)
## 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:
[](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
[](https://www.browserstack.com/)
Thank you to [BrowserStack](https://www.browserstack.com/) for providing the infrastructure that allows us to test in real browsers.
## License
This project is licensed under the terms of the
[MIT license](/LICENSE).
## 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(
](https://www.browserstack.com/)
Thank you to [BrowserStack](https://www.browserstack.com/) for providing the infrastructure that allows us to test in real browsers.
## License
This project is licensed under the terms of the
[MIT license](/LICENSE).