Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including muicss with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. var muicss = require("muicss")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

muicss v0.10.1

Lightweight CSS framework based on Google's Material Design guidelines

Material Design CSS Framework

MUI

MUI is a lightweight CSS framework that follows Google's Material Design guidelines.

Join the chat at https://gitter.im/muicss/mui Build Status Dependency Status devDependency Status

Introduction

The MUI NPM package makes it easy to import MUI into a project and create a custom build that only includes the components you need.

The simplest way to use MUI is via the top level imports muicss and muicss/react:

import { Appbar, Button, Panel } from 'muicss/react';

You can also optimize your builds by importing modules one-by-one from the lower level API:

import Appbar from 'muicss/lib/react/appbar';
import Button from 'muicss/lib/react/button';
import Container from 'muicss/lib/react/container';

Here's an example of how to use MUI in a React app:

import React from 'react';
import ReactDOM from 'react-dom';
import { Appbar, Button, Panel } from 'muicss/react';

class Example extends React.Component {
  onClick() {
    console.log('clicked on button');
  }
  
  render() {
    return (
      <div>
        <Appbar />
        <Container>
          <Panel>
            <Button onClick={this.onClick}>My Button</Button>
          </Panel>
        </Container>
      </div>
    );
  }
}

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

API Documentation

React Library

All of the MUI React components can be accessed as top-level attributes of the muicss/react package. In addition, they can be accessed individually at muicss/lib/react/{component}.

Appbar

import Appbar from 'muicss/lib/react/appbar';

<Appbar />

Read more: https://www.muicss.com/docs/v1/react/appbar

Button

import Button from 'muicss/lib/react/button';

<Button />
  * {String} color=default|primary|danger|accent
  * {String} size=default|small|large
  * {String} type=submit|button
  * {String} variant=default|flat|raised|fab
  * {Boolean} disabled=false|true

Read more: https://www.muicss.com/docs/v1/react/buttons

Checkbox

import Checkbox from 'muicss/lib/react/checkbox';

<Checkbox />
  * {Boolean} checked
  * {Boolean} defaultChecked
  * {String} defaultValue
  * {Boolean} disabled=false|true
  * {String} label
  * {String} name
  * {String} value

Read more: https://www.muicss.com/docs/v1/react/forms

Container

import Container from 'muicss/lib/react/container';

<Container />
  * {Boolean} fluid=false|true

Read more: https://www.muicss.com/docs/v1/react/container

Divider

import Divider from 'muicss/lib/react/divider';

<Divider />

Read more: https://www.muicss.com/docs/v1/react/dividers

Dropdown Component

Dropdown
import Dropdown from 'muicss/lib/react/dropdown';

<Dropdown />
  * {String or ReactElement} label
  * {String} alignment=default|right|bottom
  * {String} color=default|primary|danger|accent
  * {String} placement=default|up|right|left
  * {String} size=default|small|large
  * {String} variant=default|flat|raised|fab
  * {Boolean} disabled
  * {Function} onClick
  * {Function} onSelect

Read more: https://www.muicss.com/docs/v1/react/dropdowns

DropdownItem
import DropdownItem 'muicss/lib/react/dropdown-item';

<DropdownItem />
  * {String} link
  * {String} target
  * {String} value
  * {Function} onClick

Read more: https://www.muicss.com/docs/v1/react/dropdowns

Form

import Form from 'muicss/lib/react/form';

<Form />
  * {Boolean} inline=false|true

Read more: https://www.muicss.com/docs/v1/react/forms

Grid Elements

Row
import Row from 'muicss/lib/react/row';

<Row />

Read more: https://www.muicss.com/docs/v1/react/grid

Col
import Col from 'muicss/lib/react/col';

<Col />
  * {Integer} xs
  * {Integer} xs-offset
  * {Integer} sm
  * {Integer} sm-offset
  * {Integer} md
  * {Integer} md-offset
  * {Integer} lg
  * {Integer} lg-offset
  * {Integer} xl
  * {Integer} xl-offset

Read more: https://www.muicss.com/docs/v1/react/grid

Input

import Input from 'muicss/lib/react/input';

<Input />
  * {String} defaultValue
  * {Boolean} floatingLabel
  * {String} placeholder
  * {Boolean} invalid
  * {String} label
  * {String} name
  * {Boolean} required
  * {String} type=text|email|url|tel|password
  * {String} value
  * {Function} onChange

Read more: https://www.muicss.com/docs/v1/react/forms

Panel

import Panel from 'muicss/lib/react/panel';

<Panel />

Read more: https://www.muicss.com/docs/v1/react/panels

Radio

import Radio from 'muicss/lib/react/panel';

<Radio />
  * {String} name
  * {String} value
  * {Boolean} checked
  * {Boolean} defaultChecked
  * {Boolean} disabled=false|true

Read more: https://www.muicss.com/docs/v1/react/forms

Select Component

Select
import Select from 'muicss/lib/react/select';

<Select />
  * {String} defaultValue
  * {Boolean} disabled=false|true
  * {String} name
  * {String} label
  * {String} placeholder
  * {Boolean} readOnly=false|true
  * {Boolean} required=false|true
  * {Boolean} useDefault=false|true
  * {String} value
  * {Function} onChange

Read more: https://www.muicss.com/docs/v1/react/forms

Option
import Option from 'muicss/lib/react/option';

<Option />
  * {String} value
  * {String} label

Read more: https://www.muicss.com/docs/v1/react/forms

Tabs Component

Tabs
import Tabs from 'muicss/lib/react/tabs';

<Tabs />
  * {Integer} defaultSelectedIndex=0
  * {Integer} selectedIndex
  * {Boolean} justified=false|true
  * {Function} onChange

Read more: https://www.muicss.com/docs/v1/react/tabs

Tab
import Tab from 'muicss/lib/react/tab';

<Tab />
  * {String} label
  * {String} value
  * {Function} onActive

Read more: https://www.muicss.com/docs/v1/react/tabs

Textarea

import Textarea from 'muicss/lib/react/textarea';

<Textarea />
  * {String} defaultValue
  * {Boolean} floatingLabel
  * {String} placeholder
  * {Boolean} invalid
  * {String} label
  * {String} name
  * {Boolean} required
  * {Number} rows
  * {String} value
  * {Function} onChange

Read more: https://www.muicss.com/docs/v1/react/forms

CSS Helpers

<!-- animation -->
<div className="mui--no-transition"></div>

<!-- alignment -->
<div className="mui--text-left"></div>
<div className="mui--text-right"></div>
<div className="mui--text-center"></div>
<div className="mui--text-justify"></div>
<div className="mui--text-nowrap"></div>
<div className="mui--align-baseline"></div>
<div className="mui--align-top"></div>
<div className="mui--align-middle"></div>
<div className="mui--align-bottom"></div>

<!-- depth helpers -->
<div className="mui--z1"></div>
<div className="mui--z2"></div>
<div className="mui--z3"></div>
<div className="mui--z4"></div>
<div className="mui--z5"></div>

<!-- float helpers -->
<div className="mui--clearfix"></div>
<div className="mui--pull-right"></div>
<div className="mui--pull-left"></div>

<!-- toggle helpers -->
<div className="mui--hide"></div>
<div className="mui--show"></div>
<div className="mui--invisible"></div>
<div className="mui--overflow-hidden"></div>

<!-- responsive utilities -->
<div className="mui--visible-xs-block"></div>
<div className="mui--visible-xs-inline"></div>
<div className="mui--visible-xs-inline-block"></div>
<div className="mui--visible-sm-block"></div>
<div className="mui--visible-sm-inline"></div>
<div className="mui--visible-sm-inline-block"></div>
<div className="mui--visible-md-block"></div>
<div className="mui--visible-md-inline"></div>
<div className="mui--visible-md-inline-block"></div>
<div className="mui--visible-lg-block"></div>
<div className="mui--visible-lg-inline"></div>
<div className="mui--visible-lg-inline-block"></div>
<div className="mui--hidden-xs"></div>
<div className="mui--hidden-sm"></div>
<div className="mui--hidden-md"></div>
<div className="mui--hidden-lg"></div>

<!-- typograpy -->
<div className="mui--text-display4"></div>
<div className="mui--text-display3"></div>
<div className="mui--text-display2"></div>
<div className="mui--text-display1"></div>
<div className="mui--text-headline"></div>
<div className="mui--text-title"></div>
<div className="mui--text-subhead"></div>
<div className="mui--text-body2">Body2</div>
<div className="mui--text-body1">Body1</div>
<div className="mui--text-caption">Caption</div>
<div className="mui--text-menu">Menu</div>
<div className="mui--text-button">Button</div>

<!-- text color -->
<div className="mui--text-dark"></div>
<div className="mui--text-dark-secondary"></div>
<div className="mui--text-dark-hint"></div>
<div className="mui--text-light"></div>
<div className="mui--text-light-secondary"></div>
<div className="mui--text-light-hint"></div>
<div className="mui--text-accent"></div>
<div className="mui--text-accent-secondary"></div>
<div className="mui--text-accent-hint"></div>
<div className="mui--text-danger"></div>
<div className="mui--text-black"></div>
<div className="mui--text-white"></div>

<!-- background color -->
<div className="mui--bg-primary"></div>
<div className="mui--bg-primary-dark"></div>
<div className="mui--bg-primary-light"></div>
<div className="mui--bg-accent"></div>
<div className="mui--bg-accent-dark"></div>
<div className="mui--bg-accent-light"></div>
<div className="mui--bg-danger"></div>

<!-- user select -->
<div className="mui--no-user-select"></div>

<!-- appbar dimension helpers -->
<div className="mui--appbar-height"></div>
<div className="mui--appbar-min-height"></div>
<div className="mui--appbar-line-height"></div>

<!-- list helpers -->
<ul className="mui-list--unstyled"></ul>
<ul className="mui-list--inline"></ul>

Directory Tree

muicss
├── angular.js
├── dist
│   ├── angular
│   │   ├── mui-angular.js
│   │   └── mui-angular.min.js
│   ├── css
│   │   ├── mui.css
│   │   ├── mui.min.css
│   │   ├── mui-noglobals.css
│   │   ├── mui-noglobals.min.css
│   │   ├── mui-noglobals-rtl.css
│   │   ├── mui-noglobals-rtl.min.css
│   │   ├── mui-rtl.css
│   │   └── mui-rtl.min.css
│   ├── email
│   │   ├── mui-email-inline.css
│   │   ├── mui-email-inline-rtl.css
│   │   ├── mui-email-styletag.css
│   │   └── mui-email-styletag-rtl.css
│   ├── extra
│   │   ├── mui-angular-combined.js
│   │   ├── mui-angular-combined.min.js
│   │   ├── mui-colors.css
│   │   ├── mui-colors.min.css
│   │   ├── mui-combined.js
│   │   ├── mui-combined.min.js
│   │   ├── mui-noglobals.css
│   │   ├── mui-noglobals.min.css
│   │   ├── mui-noglobals-rtl.css
│   │   ├── mui-noglobals-rtl.min.css
│   │   ├── mui-react-combined.js
│   │   └── mui-react-combined.min.js
│   ├── js
│   │   ├── mui.js
│   │   └── mui.min.js
│   ├── react
│   │   ├── mui-react.js
│   │   └── mui-react.min.js
│   └── webcomponents
│       ├── mui-webcomponents.js
│       └── mui-webcomponents.min.js
├── index.js
├── lib
│   ├── angular
│   │   ├── appbar.js
│   │   ├── babel-helpers.js
│   │   ├── button.js
│   │   ├── caret.js
│   │   ├── checkbox.js
│   │   ├── col.js
│   │   ├── container.js
│   │   ├── divider.js
│   │   ├── dropdown-item.js
│   │   ├── dropdown.js
│   │   ├── form.js
│   │   ├── input.js
│   │   ├── panel.js
│   │   ├── radio.js
│   │   ├── row.js
│   │   ├── select.js
│   │   └── tabs.js
│   ├── js
│   │   ├── config.js
│   │   ├── lib
│   │   │   ├── forms.js
│   │   │   ├── jqLite.js
│   │   │   └── util.js
│   │   └── overlay.js
│   ├── react
│   │   ├── appbar.js
│   │   ├── babel-helpers.js
│   │   ├── button.js
│   │   ├── caret.js
│   │   ├── checkbox.js
│   │   ├── col.js
│   │   ├── container.js
│   │   ├── divider.js
│   │   ├── dropdown-item.js
│   │   ├── dropdown.js
│   │   ├── form.js
│   │   ├── _helpers.js
│   │   ├── input.js
│   │   ├── option.js
│   │   ├── panel.js
│   │   ├── radio.js
│   │   ├── row.js
│   │   ├── select.js
│   │   ├── tab.js
│   │   ├── tabs.js
│   │   ├── textarea.js
│   │   └── text-field.js
│   └── sass
│       ├── mui
│       │   ├── _appbar.scss
│       │   ├── _buttons.scss
│       │   ├── _checkbox-and-radio.scss
│       │   ├── _colors.scss
│       │   ├── _containers.scss
│       │   ├── _divider.scss
│       │   ├── _dropdown.scss
│       │   ├── _form.scss
│       │   ├── _globals.scss
│       │   ├── _grid.scss
│       │   ├── _helpers.scss
│       │   ├── mixins
│       │   │   ├── _buttons.scss
│       │   │   ├── _forms.scss
│       │   │   ├── _grid-framework.scss
│       │   │   ├── _typography.scss
│       │   │   └── _util.scss
│       │   ├── _mixins.scss
│       │   ├── _overlay.scss
│       │   ├── _panel.scss
│       │   ├── _ripple.scss
│       │   ├── _select.scss
│       │   ├── _table.scss
│       │   ├── _tabs.scss
│       │   ├── _textfield.scss
│       │   ├── _typography.scss
│       │   └── _variables.scss
│       ├── mui-colors.scss
│       ├── mui-noglobals.scss
│       └── mui.scss
├── LICENSE.txt
├── package.json
├── react.js
└── README.md

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free