Introduction

Overview

The MUI React library is designed from the ground up to be fast, small and developer-friendly. Using the MUI React library you can add MUI components to your React apps and switch seamlessly between MUI CSS/JS and MUI React even within the same app.

MUI is designed to work with React 15.X and 16.X. To use MUI React you must include the MUI CSS file in your HTML payload. It can be compiled into your app's CSS or added from the CDN:

<link href="//cdn.muicss.com/mui-0.10.3/css/mui.min.css" rel="stylesheet" type="text/css" media="screen" />

You can also install MUI CSS and source SASS files using Bower:

$ bower install mui

Or using NPM:

$ npm install --save muicss

View on Github »

NPM Package

The MUI React library is designed to be used server-side or with your build system via the muicss NPM package. Once the package is installed you can access all the components via the muicss/react module or you can make your builds smaller by only including the components you need from muicss/lib/react/{component}:

// Access all components from `muicss/react` module
import { Appbar, Button, Container } from 'muicss/react';

// Access components individually for smaller build files (RECOMMENDED)
import Appbar from 'muicss/lib/react/appbar';
import Button from 'muicss/lib/react/button';
import Container from 'muicss/lib/react/container';

// MUI also supports ES5 syntax
var muicss = require('muicss/react');
var Appbar = muicss.Appbar;
var Button = muicss.Button;
var Container = muicss.Container;

var Appbar = require('muicss/lib/react/appbar');
var Button = require('muicss/lib/react/button');
var Container = require('muicss/lib/react/container');

Here is a full MUI React example:

import React from 'react';
import ReactDOM from 'react-dom';
import Appbar from 'muicss/lib/react/appbar';
import Button from 'muicss/lib/react/button';
import Container from 'muicss/lib/react/container';

class Example extends React.Component {
  render() {
    return (
      <div>
        <Appbar></Appbar>
        <Container>
          <Button color="primary">button</Button>
        </Container>
      </div>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById('example'));

To learn more about the MUI React components and to see examples please browse the documentation on this site or skip ahead to the Reference page to see a full list of all the MUI React components and CSS helpers.

Browser JSX

If you'd like to use MUI React in the browser without using NPM you can also use the pre-compiled MUI React payload with Babel's in-browser JSX compiler (not recommended for production use!):

<!doctype html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="//cdn.muicss.com/mui-0.10.3/css/mui.css" rel="stylesheet" type="text/css" />
    <script src="//unpkg.com/react@16/umd/react.production.min.js"></script>
    <script src="//unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <script src="//cdn.muicss.com/mui-0.10.3/react/mui-react.js"></script>

    <!-- Browser JSX compiler (for development only) -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      let Appbar = mui.react.Appbar,
          Button = mui.react.Button,
          Container = mui.react.Container;

      class Example extends React.Component {
        render() {
          return (
            <div>
              <Appbar></Appbar>
              <Container>
                <Button color="primary">button</Button>
              </Container>
            </div>
          );
        }
      }
          
      ReactDOM.render(<Example />, document.getElementById('example'));
    </script>
  </body>
</html>

Talk to us

The React ecosystem is changing rapidly so we need your help to keep everything up-to-date. If you have any recommendations on how to improve our React support or if you'd like to get involved please send us an email (contact@muicss.com) or issue a pull-request on Github!

« Previous Next »