1 | <p align="center">
|
2 | <a href="https://material-ui.com/" rel="noopener" target="_blank"><img width="150" src="https://material-ui.com/static/logo.svg" alt="Material-UI logo"></a></p>
|
3 | </p>
|
4 |
|
5 | <h1 align="center">Material-UI</h1>
|
6 |
|
7 | <div align="center">
|
8 |
|
9 | [React](https://reactjs.org/) components for faster and easier web development. Build your own design system, or start with [Material Design](https://material.io/design/introduction/).
|
10 |
|
11 | [![npm package](https://img.shields.io/npm/v/@material-ui/core/latest.svg)](https://www.npmjs.com/package/@material-ui/core)
|
12 | [![npm downloads](https://img.shields.io/npm/dm/@material-ui/core.svg)](https://www.npmjs.com/package/@material-ui/core)
|
13 | [![CircleCI](https://img.shields.io/circleci/project/github/mui-org/material-ui/master.svg)](https://circleci.com/gh/mui-org/material-ui/tree/master)
|
14 | [![Build Status](https://dev.azure.com/mui-org/Material-UI/_apis/build/status/mui-org.material-ui?branchName=master)](https://dev.azure.com/mui-org/Material-UI/_build/latest?definitionId=1&branchName=master)
|
15 | [![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)
|
16 | [![CII Best Practices](https://bestpractices.coreinfrastructure.org/projects/1320/badge)](https://bestpractices.coreinfrastructure.org/projects/1320)
|
17 | ![Code style](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)
|
18 | [![Follow on Twitter](https://img.shields.io/twitter/follow/MaterialUI.svg?label=follow+Material-UI)](https://twitter.com/MaterialUI)
|
19 | [![Dependabot Status](https://api.dependabot.com/badges/status?host=github&repo=mui-org/material-ui)](https://dependabot.com)
|
20 | [![PeerDependencies](https://david-dm.org/mui-org/material-ui/master/peer-status.svg?path=packages/material-ui)](https://david-dm.org/mui-org/material-ui/master?type=peer&path=packages/material-ui)
|
21 | [![Dependencies](https://david-dm.org/mui-org/material-ui/master/status.svg?path=packages/material-ui)](https://david-dm.org/mui-org/material-ui/master?path=packages/material-ui)
|
22 | [![DevDependencies](https://david-dm.org/mui-org/material-ui/master/dev-status.svg?path=packages/material-ui)](https://david-dm.org/mui-org/material-ui/master?type=dev)
|
23 | [![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")
|
24 | [![Crowdin](https://d322cqt584bo4o.cloudfront.net/material-ui-docs/localized.svg?cache=v1)](https://translate.material-ui.com/project/material-ui-docs)
|
25 |
|
26 | </div>
|
27 |
|
28 | ## Installation
|
29 |
|
30 | Material-UI is available as an [npm package](https://www.npmjs.com/package/@material-ui/core).
|
31 |
|
32 | **[Stable channel v4](https://material-ui.com/)**
|
33 | ```sh
|
34 | // with npm
|
35 | npm install @material-ui/core
|
36 |
|
37 | // with yarn
|
38 | yarn add @material-ui/core
|
39 | ```
|
40 |
|
41 | **[v3.x](https://v3.material-ui.com/)** ([Migration from v3 to v4](https://material-ui.com/guides/migration-v3/))
|
42 |
|
43 | **[v0.x](https://v0.material-ui.com/)** ([Migration to v1](https://material-ui.com/guides/migration-v0x/))
|
44 |
|
45 | Please note that `@next` will only point to pre-releases; to get the latest stable release use `@latest` instead.
|
46 |
|
47 | ## Who sponsors Material-UI?
|
48 |
|
49 | ### Diamond 💎
|
50 |
|
51 | Diamond Sponsors are those who have pledged $1,500/month or more to Material-UI.
|
52 |
|
53 | ### Gold 🏆
|
54 |
|
55 | via [Patreon](https://www.patreon.com/oliviertassinari)
|
56 |
|
57 | <p style="display: flex; justify-content: center;">
|
58 | <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>
|
59 | <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>
|
60 | </p>
|
61 |
|
62 | via [OpenCollective](https://opencollective.com/material-ui)
|
63 |
|
64 | <p style="display: flex; justify-content: center; flex-wrap: wrap;">
|
65 | <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="call-em-all" title="The easy way to message your group" width="100" loading="lazy"></a>
|
66 | </p>
|
67 |
|
68 | Gold Sponsors are those who have pledged $500/month or more to Material-UI.
|
69 |
|
70 | ### There is more!
|
71 |
|
72 | See the full list of [our backers](https://material-ui.com/discover-more/backers/).
|
73 |
|
74 | ## Usage
|
75 |
|
76 | Here is a quick example to get you started, **it's all you need**:
|
77 |
|
78 | ```jsx
|
79 | import React from 'react';
|
80 | import ReactDOM from 'react-dom';
|
81 | import Button from '@material-ui/core/Button';
|
82 |
|
83 | function App() {
|
84 | return (
|
85 | <Button variant="contained" color="primary">
|
86 | Hello World
|
87 | </Button>
|
88 | );
|
89 | }
|
90 |
|
91 | ReactDOM.render(<App />, document.querySelector('#app'));
|
92 | ```
|
93 |
|
94 | Yes, it's really all you need to get started as you can see in this live and interactive demo:
|
95 |
|
96 | [![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/4j7m47vlm4)
|
97 |
|
98 | ## Questions
|
99 |
|
100 | For *how-to* questions and other non-issues,
|
101 | please use [StackOverflow](https://stackoverflow.com/questions/tagged/material-ui) instead of Github issues.
|
102 | There is a StackOverflow tag called "material-ui" that you can use to tag your questions.
|
103 |
|
104 | ## Examples
|
105 |
|
106 | Are you looking for an example project to get started?
|
107 | [We host some](https://material-ui.com/getting-started/example-projects/).
|
108 |
|
109 | ## Documentation
|
110 |
|
111 | Check out our [documentation website](https://material-ui.com/).
|
112 |
|
113 | ## Premium Themes
|
114 |
|
115 | You can find complete templates & themes in the [Material-UI store](https://material-ui.com/store/) .
|
116 |
|
117 | ## Contributing
|
118 |
|
119 | 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.
|
120 |
|
121 | Notice that contributions go far beyond pull requests and commits.
|
122 | 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).
|
123 |
|
124 | ## Changelog
|
125 |
|
126 | Recently Updated?
|
127 | Please read the [changelog](https://github.com/mui-org/material-ui/releases).
|
128 |
|
129 | ## Roadmap
|
130 |
|
131 | The future plans and high priority features and enhancements can be found in the [roadmap](https://material-ui.com/discover-more/roadmap/) file.
|
132 |
|
133 | ## License
|
134 |
|
135 | This project is licensed under the terms of the
|
136 | [MIT license](/LICENSE).
|