Material-UI

React components that implement Google’s Material Design.

Material-UI logo

Material-UI

Installation

Material-UI is available as an npm package.

Stable channel v1

<span class="token comment">// with npm</span>
npm install @material<span class="token operator">-</span>ui<span class="token operator">/</span>core

<span class="token comment">// with yarn</span>
yarn add @material<span class="token operator">-</span>ui<span class="token operator">/</span>core
JavaScript

v0.x (Migration to v1)

<span class="token comment">// with npm</span>
npm install material<span class="token operator">-</span>ui

<span class="token comment">// with yarn</span>
yarn add material<span class="token operator">-</span>ui
JavaScript

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. If you’d like to join them, please consider:

What’s the difference between Patreon and OpenCollective?

Funds donated via Patreon directly support Olivier Tassinari‘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

creative-tim bitsrc

via OpenCollective

callemall localize localize

There is more!

See the full list of our backers.

Usage

Here is a quick example to get you started, it’s all you need:

<span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> ReactDOM <span class="token keyword">from</span> <span class="token string">'react-dom'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> Button <span class="token keyword">from</span> <span class="token string">'@material-ui/core/Button'</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">(</span>
    
      Hello World
    
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">,</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'#app'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
JavaScript

Yes, it’s really all you need to get started as you can see in this live and interactive demo:

Subscribe to the Newsletter

Get our latest news,tutorials,guides,tips & deals delivered to your inbox.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

shares