MATERIAL-UI

React components for faster and easier web development. Build your own design system, or start with Material Design.

A quick word from our sponsors:Tidelift — Enterprise-ready open source software

Installation

Install Material-UI's source files via npm. We take care of injecting the CSS needed.

  $ npm install @material-ui/core

or use a CDN.

Load the default Roboto font.

  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />

Read installation docs

Usage

Material-UI components work without any additional setup, and don't pollute the global scope.

  import React from 'react';
  import Button from '@material-ui/core/Button';

  const App = () => (
    <Button variant="contained" color="primary">
      Hello World
    </Button>
  );

Explore the docs

Premium themes

Take Material-UI to the next level with premium themes from our official marketplace – all built on Material-UI.

Browse themes

Material-UI's sponsors

The core of Material-UI is a crowd-funded open-source project, licensed under the permissive MIT license. Sponsorship increases the rate of bug fixes, documentation improvements, and feature development.

Diamond 💎

3/3 slots available

Diamond Sponsors are those who have pledged $2,000/month or more to Material-UI. Please contact us at diamond@material-ui.com to subscribe to this tier.