Wondering what’s next for npm?Check out our public roadmap! »

    muicss
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/muicss package

    0.10.3 • Public • Published

    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
    

    Install

    npm i muicss

    DownloadsWeekly Downloads

    2,240

    Version

    0.10.3

    License

    MIT

    Unpacked Size

    2.4 MB

    Total Files

    138

    Last publish

    Collaborators

    • avatar