140 lines
6.9 KiB
Markdown
140 lines
6.9 KiB
Markdown
|
<p align="center">
|
||
|
|
<a href="https://material-ui.com/" rel="noopener" target="_blank"><img width="150" src="https://material-ui.com/static/images/material-ui-logo.svg" alt="Material-UI logo"></a></p>
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h1 align="center">Material-UI</h1>
|
||
|
|
|
||
|
|
<div align="center">
|
||
|
|
|
||
|
|
[React](https://reactjs.org/) components that implement [Google's Material Design](https://material.io/design/introduction/).
|
||
|
|
|
||
|
|
[](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/master)
|
||
|
|
[](https://dev.azure.com/mui-org/Material-UI/_build/latest?definitionId=1&branchName=master)
|
||
|
|
[](https://codecov.io/gh/mui-org/material-ui/branch/master)
|
||
|
|
[](https://bestpractices.coreinfrastructure.org/projects/1320)
|
||
|
|
|
||
|
|
[](https://twitter.com/MaterialUI)
|
||
|
|
[](https://dependabot.com)
|
||
|
|
[](https://david-dm.org/mui-org/material-ui/master?type=peer&path=packages/material-ui)
|
||
|
|
[](https://david-dm.org/mui-org/material-ui/master?path=packages/material-ui)
|
||
|
|
[](https://david-dm.org/mui-org/material-ui/master?type=dev)
|
||
|
|
[](https://isitmaintained.com/project/mui-org/material-ui "Average time to resolve an issue")
|
||
|
|
[](https://translate.material-ui.com/project/material-ui-docs)
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
## Installation
|
||
|
|
|
||
|
|
Material-UI is available as an [npm package](https://www.npmjs.com/package/@material-ui/core).
|
||
|
|
|
||
|
|
**[Stable channel v4](https://material-ui.com/)**
|
||
|
|
```sh
|
||
|
|
// with npm
|
||
|
|
npm install @material-ui/core
|
||
|
|
|
||
|
|
// with yarn
|
||
|
|
yarn add @material-ui/core
|
||
|
|
```
|
||
|
|
|
||
|
|
**[v3.x](https://v3.material-ui.com/)** ([Migration from v3 to v4](https://material-ui.com/guides/migration-v3/))
|
||
|
|
|
||
|
|
**[v0.x](https://v0.material-ui.com/)** ([Migration to v1](https://material-ui.com/guides/migration-v0x/))
|
||
|
|
|
||
|
|
Please note that `@next` will only point to pre-releases; to get the latest stable release use `@latest` instead.
|
||
|
|
|
||
|
|
## Who sponsors Material-UI?
|
||
|
|
|
||
|
|
### Diamond 💎
|
||
|
|
|
||
|
|
*3/3 slots available*
|
||
|
|
|
||
|
|
Diamond Sponsors are those who have pledged $2,000/month and more to Material-UI.
|
||
|
|
Please contact us at diamond@material-ui.com to subscribe to this tier.
|
||
|
|
|
||
|
|
### Gold 🏆
|
||
|
|
|
||
|
|
via [Patreon](https://www.patreon.com/oliviertassinari)
|
||
|
|
|
||
|
|
<p style="display: flex; justify-content: center;">
|
||
|
|
<a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="tidelift" href="https://tidelift.com/subscription/pkg/npm-material-ui?utm_source=material_ui&utm_medium=referral&utm_campaign=homepage" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img width="96" src="https://github.com/tidelift.png?size=96" alt="tidelift" title="Enterprise-ready open source software" /></a>
|
||
|
|
<a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="bitsrc" href="https://bit.dev" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img width="96" src="https://github.com/teambit.png?size=96" alt="bitsrc" title="The fastest way to share code" /></a>
|
||
|
|
</p>
|
||
|
|
|
||
|
|
via [OpenCollective](https://opencollective.com/material-ui)
|
||
|
|
|
||
|
|
<p style="display: flex; justify-content: center; flex-wrap: wrap;">
|
||
|
|
<a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="callemall" href="https://www.call-em-all.com" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img src="https://images.opencollective.com/proxy/images?src=https%3A%2F%2Fopencollective-production.s3-us-west-1.amazonaws.com%2Ff4053300-e0ea-11e7-acf0-0fa7c0509f4e.png&height=100" alt="callemall" title="The easy way to message your group" width="100" loading="lazy"></a>
|
||
|
|
</p>
|
||
|
|
|
||
|
|
Gold Sponsors are those who have pledged $500/month and more to Material-UI.
|
||
|
|
|
||
|
|
### 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 (
|
||
|
|
<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:
|
||
|
|
|
||
|
|
[](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://material-ui.com/getting-started/example-projects/).
|
||
|
|
|
||
|
|
## Documentation
|
||
|
|
|
||
|
|
Check out our [documentation website](https://material-ui.com/).
|
||
|
|
|
||
|
|
## Premium Themes
|
||
|
|
|
||
|
|
You can find complete templates & themes in our [premium themes](https://themes.material-ui.com/) section.
|
||
|
|
|
||
|
|
## Contributing
|
||
|
|
|
||
|
|
Read our [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://material-ui.com/getting-started/faq/#material-ui-is-awesome-how-can-i-support-the-project).
|
||
|
|
|
||
|
|
## 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](https://material-ui.com/discover-more/roadmap/) file.
|
||
|
|
|
||
|
|
## License
|
||
|
|
|
||
|
|
This project is licensed under the terms of the
|
||
|
|
[MIT license](/LICENSE).
|