MUI CSS Framework

0.10.3 verified Thu Apr 23 auth: no javascript abandoned

MUI is a lightweight CSS framework and React component library designed to implement Google's Material Design guidelines. The current stable version, 0.10.3, was last published over five years ago, indicating that the project is no longer actively maintained. It differentiates itself by offering a small footprint (6.6KB CSS, 5.4KB JS gzipped), a responsive grid, and no external JavaScript dependencies for its core library. It also provides a separate library for styling HTML emails. While it aims for developer-friendliness and customization via SASS, its lack of recent updates means it does not support modern JavaScript or React ecosystem practices and versions.

Common errors

error npm ERR! Could not resolve dependency: npm ERR! peer react@"^17.0.0" from muicss@0.10.3 ↓

cause Attempting to install or use `muicss` in a project that requires or has React v17 or newer, which conflicts with `muicss`'s outdated peer dependency requirements.

fix

Either downgrade your project's React version to 16.x (npm install react@16 react-dom@16 or yarn add react@16 react-dom@16) or choose a different, actively maintained Material Design UI library compatible with modern React.

error MUI components appear unstyled. (e.g., 'Button has no style in it') ↓

cause The essential `mui.min.css` stylesheet for the `muicss` framework has not been correctly imported or linked in your application, leading to unstyled components.

fix

Ensure that import 'muicss/dist/css/mui.min.css'; is included in your main application entry file (e.g., index.js or App.js), or that the CSS file is linked directly in your index.html via a <link> tag pointing to the correct path (e.g., from a CDN or your node_modules).

Warnings

breaking This package is effectively abandoned and has not been updated in over 5 years. It is incompatible with modern React versions (v17+) and newer JavaScript/TypeScript tooling. ↓

fix Consider migrating to actively maintained Material Design libraries like `@mui/material` (formerly Material-UI) or `React-Bootstrap` for modern React compatibility and features.

gotcha This `muicss` package is often confused with the actively developed `@mui/material` (formerly Material-UI) library. They are distinct projects, and `muicss` is unmaintained. ↓

fix Verify you are installing the correct package. If you intend to use the modern Material UI library, install `@mui/material` via `npm install @mui/material`.

breaking The `muicss` package's peer dependency `react` is limited to versions `^0.14.0 || ^15.0.0 || ^16.0.0`. Using `muicss` with React 17 or later will lead to peer dependency installation errors and potential runtime issues. ↓

fix Downgrade your React version to `^16.0.0` or earlier, or migrate your project to a different, actively maintained Material Design library that supports your current React version.

deprecated The `muicss` React component library uses `react-addons-shallow-compare`, which has been deprecated since React v15.5. ↓

fix There is no direct fix within `muicss` itself. This highlights the project's outdated nature. Migration to a modern library is recommended.

Install

npm install muicss

yarn add muicss

pnpm add muicss

Imports

{ Appbar, Button, Panel }
wrong
```
const { Appbar } = require('muicss/react');
```
correct
```
import { Appbar, Button, Panel } from 'muicss/react';
```
This provides all MUI React components via a single entry point, suitable for most modern bundlers, though ESM is recommended.
Appbar (individual component)
wrong
```
import { Appbar } from 'muicss/lib/react/appbar';
```
correct
```
import Appbar from 'muicss/lib/react/appbar';
```
Recommended for optimizing bundle size by importing only necessary components, as individual components are default exports from their specific paths.
MUI CSS Styles
wrong
```
require('muicss/dist/css/mui.min.css');
```
correct
```
import 'muicss/dist/css/mui.min.css';
```
Essential for applying the Material Design styling. This must be imported somewhere in the application's entry point or linked in the HTML.

Quickstart

This quickstart demonstrates how to render a simple React application using `muicss` components like `Appbar`, `Container`, `Panel`, and `Button`, including the essential CSS import for styling.

import React from 'react';
import ReactDOM from 'react-dom';
import { Appbar, Button, Panel, Container } from 'muicss/react';
import 'muicss/dist/css/mui.min.css'; // Don't forget to import the CSS!

class Example extends React.Component {
  onClick() {
    console.log('clicked on button');
  }
  
  render() {
    return (
      <div>
        <Appbar title="MUI Example App" />
        <Container>
          <Panel>
            <h1>Welcome to MUI</h1>
            <p>This is a basic example using MUI React components.</p>
            <Button onClick={this.onClick} color="primary">My Button</Button>
          </Panel>
        </Container>
      </div>
    );
  }
}

// Ensure a div with id='example' exists in your HTML
ReactDOM.render(<Example />, document.getElementById('example'));