{"library":"muicss","title":"MUI CSS Framework","description":"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.","language":"javascript","status":"abandoned","last_verified":"Thu Apr 23","install":{"commands":["npm install muicss"],"cli":null},"imports":["import { Appbar, Button, Panel } from 'muicss/react';","import Appbar from 'muicss/lib/react/appbar';","import 'muicss/dist/css/mui.min.css';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Appbar, Button, Panel, Container } from 'muicss/react';\nimport 'muicss/dist/css/mui.min.css'; // Don't forget to import the CSS!\n\nclass Example extends React.Component {\n  onClick() {\n    console.log('clicked on button');\n  }\n  \n  render() {\n    return (\n      <div>\n        <Appbar title=\"MUI Example App\" />\n        <Container>\n          <Panel>\n            <h1>Welcome to MUI</h1>\n            <p>This is a basic example using MUI React components.</p>\n            <Button onClick={this.onClick} color=\"primary\">My Button</Button>\n          </Panel>\n        </Container>\n      </div>\n    );\n  }\n}\n\n// Ensure a div with id='example' exists in your HTML\nReactDOM.render(<Example />, document.getElementById('example'));","lang":"javascript","description":"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}