{"id":13525290,"url":"https://github.com/luisvinicius167/preact-mui","last_synced_at":"2026-03-07T14:31:26.678Z","repository":{"id":51691611,"uuid":"75875751","full_name":"luisvinicius167/preact-mui","owner":"luisvinicius167","description":"Preact Components for MUI CSS framework.","archived":false,"fork":false,"pushed_at":"2017-04-08T12:30:13.000Z","size":101,"stargazers_count":37,"open_issues_count":1,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-06-19T08:44:39.966Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://preact-mui.surge.sh/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/luisvinicius167.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-12-07T21:07:53.000Z","updated_at":"2023-05-28T20:52:02.000Z","dependencies_parsed_at":"2022-08-23T01:10:30.883Z","dependency_job_id":null,"html_url":"https://github.com/luisvinicius167/preact-mui","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/luisvinicius167/preact-mui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luisvinicius167%2Fpreact-mui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luisvinicius167%2Fpreact-mui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luisvinicius167%2Fpreact-mui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luisvinicius167%2Fpreact-mui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/luisvinicius167","download_url":"https://codeload.github.com/luisvinicius167/preact-mui/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luisvinicius167%2Fpreact-mui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30217428,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-07T14:02:48.375Z","status":"ssl_error","status_checked_at":"2026-03-07T14:02:43.192Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T06:01:17.447Z","updated_at":"2026-03-07T14:31:26.627Z","avatar_url":"https://github.com/luisvinicius167.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# preact-mui\n\n[![npm package](https://img.shields.io/badge/npm-v0.1.0-blue.svg)](https://www.npmjs.com/package/preact-mui)\n\n\u003eThe MUI CSS Preact library is designed from the ground up to be fast, small and developer-friendly. Using the MUI Preact library you can add MUI components to your Preact apps and switch seamlessly between MUI CSS/JS and MUI Preact even within the same app.\n\n---\n\n### Components Example\n\n[**Preact MUI CSS Components **](http://preact-mui.surge.sh/)\n\n\n### Get Started\n\nTo use MUI Preact you must include the MUI CSS and JS file in your HTML payload:\n```html\n\u003clink href=\"//cdn.muicss.com/mui-0.9.6/css/mui.min.css\" rel=\"stylesheet\" \ntype=\"text/css\" media=\"screen\" /\u003e\n\u003cscript src=\"//cdn.muicss.com/mui-0.9.6/js/mui.min.js\"\u003e\u003c/script\u003e\n```\n\n#### Install\n\n`npm install preact-mui`\n\n\n#### Using Components \n\n```javascript\n// Access components individually for smaller build files (RECOMMENDED)\nimport Appbar from 'preact-mui/lib/appbar';\nimport Button from 'preact-mui/lib/button';\nimport Container from 'preact-mui/lib/container';\n\n// Access all components from preact-mui module\nimport { Appbar, Button, Container } from 'preact-mui';\n\n// Preact-MUI also supports ES5 syntax\nvar preactMui = require('preact-mui');\nvar Appbar = preactMui.Appbar;\nvar Button = preactMui.Button;\nvar Container = preactMui.Container;\n```\n\n#### Real life example:\n\n```javascript\nimport {h, Component, render} from 'preact';\n\nimport Appbar from 'preact-mui/lib/appbar';\nimport Button from 'preact-mui/lib/button';\nimport Container from 'preact-mui/lib/container';\n\nclass Example extends React.Component {\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cAppbar\u003e\u003c/Appbar\u003e\n        \u003cContainer fluid={true}\u003e\n          \u003cButton color=\"primary\"\u003ebutton\u003c/Button\u003e\n        \u003c/Container\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\nrender(\u003cExample /\u003e, document.getElementById('example'));\n```\n\n### API\nPreact-MUI has the same API with React MUI, then you can check tre React API and use the same with Preact-MUI.\n\n\u003ca href=\"https://www.muicss.com/docs/v1/react/introduction\"\u003eMUI CSS React API\u003c/a\u003e\n\n---\n\n## API Documentation\n\n### Preact Library\n\nAll of the MUI React components can be accessed as top-level attributes of the `preact-mui` package. In addition, they can be accessed individually at `preact/lib/{component}`.\n\n#### Appbar\n\n```jsx\nimport Appbar from 'preact-mui/lib/appbar';\n\n\u003cAppbar /\u003e\n```\n\nRead more: https://www.muicss.com/docs/v1/react/appbar\n\n#### Button\n\n```jsx\nimport Button from 'preact-mui/lib/button';\n\n\u003cButton /\u003e\n  * {String} color=default|primary|danger|accent\n  * {String} size=default|small|large\n  * {String} type=submit|button\n  * {String} variant=default|flat|raised|fab\n  * {Boolean} disabled=false|true\n```\n\nRead more: https://www.muicss.com/docs/v1/react/buttons\n\n#### Checkbox\n\n```jsx\nimport Checkbox from 'preact-mui/lib/checkbox';\n\n\u003cCheckbox /\u003e\n  * {String} label\n  * {String} value\n  * {Boolean} checked\n  * {Boolean} defaultChecked\n  * {Boolean} disabled=false|true\n```\n\nRead more: https://www.muicss.com/docs/v1/react/forms\n\n#### Container\n\n```jsx\nimport Container from 'preact-mui/lib/container';\n\n\u003cContainer /\u003e\n  * {Boolean} fluid=false|true\n```\n\nRead more: https://www.muicss.com/docs/v1/react/container\n\n#### Divider\n\n```jsx\nimport Divider from 'preact-mui/lib/divider';\n\n\u003cDivider /\u003e\n```\n\nRead more: https://www.muicss.com/docs/v1/react/dividers\n\n#### Dropdown Component\n\n##### Dropdown\n\n```jsx\nimport Dropdown from 'preact-mui/lib/dropdown';\n\n\u003cDropdown /\u003e\n  * {String} label\n  * {String} alignMenu=left|right\n  * {String} color=default|primary|danger|accent\n  * {String} size=default|small|large\n  * {String} variant=default|flat|raised|fab\n  * {Boolean} disabled\n\n```\n\nRead more: https://www.muicss.com/docs/v1/react/dropdowns\n\n##### DropdownItem\n\n```jsx\nimport DropdownItem from 'preact-mui/lib/dropdown-item';\n\n\u003cDropdownItem /\u003e\n  * {String} link\n```\n\nRead more: https://www.muicss.com/docs/v1/react/dropdowns\n\n#### Form\n\n```jsx\nimport Form from 'preact-mui/lib/form';\n\n\u003cForm /\u003e\n  * {Boolean} inline=false|true\n  * {Boolean} legend=false|true\n```\n\nRead more: https://www.muicss.com/docs/v1/react/forms\n\n#### Grid Elements\n\n##### Row\n\n```jsx\nimport Row from 'preact-mui/lib/row';\n\n\u003cRow /\u003e\n```\n\nRead more: https://www.muicss.com/docs/v1/react/grid\n\n##### Col\n\n```jsx\nimport Col from 'preact-mui/lib/col';\n\n\u003cCol /\u003e\n  * {Integer} xs\n  * {Integer} xs-offset\n  * {Integer} sm\n  * {Integer} sm-offset\n  * {Integer} md\n  * {Integer} md-offset\n  * {Integer} lg\n  * {Integer} lg-offset\n  * {Integer} xl\n  * {Integer} xl-offset\n```\n\nRead more: https://www.muicss.com/docs/v1/react/grid\n\n#### Input\n\n```jsx\nimport Input from 'preact-mui/lib/input';\n\n\u003cInput /\u003e\n  * {String} defaultValue\n  * {String} hint\n  * {String} value\n  * {Boolean} floatingLabel\n  * {String|Object} style\n  * {String} type=text|email|url|tel|password\n```\n\nRead more: https://www.muicss.com/docs/v1/react/forms\n\n#### Panel\n\n```jsx\nimport Panel from 'preact-mui/lib/panel';\n\n\u003cPanel /\u003e\n```\n\nRead more: https://www.muicss.com/docs/v1/react/panels\n\n#### Radio\n\n```jsx\nimport Radio from 'preact-mui/lib/panel';\n\n\u003cRadio /\u003e\n  * {String} name\n  * {String} value\n  * {String} label\n  * {Boolean} checked\n  * {Boolean} defaultChecked\n  * {Boolean} disabled=false|true\n```\n\nRead more: https://www.muicss.com/docs/v1/react/forms\n\n#### Select Component\n\n##### Select\n\n```jsx\nimport Select from 'preact-mui/lib/select';\n\n\u003cSelect /\u003e\n  * {String} defaultValue\n  * {String} label\n  * {String|Object} style\n  * {Boolean} disabled=false|true\n```\n\nRead more: https://www.muicss.com/docs/v1/react/forms\n\n##### Option\n\n```jsx\nimport Option from 'preact-mui/lib/option';\n\n\u003cOption /\u003e\n  * {String} value\n  * {String} label\n```\n\nRead more: https://www.muicss.com/docs/v1/react/forms\n\n#### Tabs Component\n\n##### Tabs\n\n```jsx\nimport Tabs from 'preact-mui/lib/tabs';\n\n\u003cTabs /\u003e\n  * {Boolean} justified=false|true\n```\n\nRead more: https://www.muicss.com/docs/v1/react/tabs\n\n##### Tab\n\n```jsx\nimport Tab from 'preact-mui/lib/tab';\n\n\u003cTab /\u003e\n  * {Boolean} selected\n  * {String} label\n  * {String} value\n```\n\nRead more: https://www.muicss.com/docs/v1/react/tabs\n\n#### Textarea\n\n```jsx\nimport Textarea from 'preact-mui/lib/textarea';\n\n\u003cTextarea /\u003e\n  * {String} defaultValue\n  * {String} hint\n  * {String} value\n  * {Boolean} floatingLabel\n  * {String} label\n  * {String|Object} style\n```\n\nRead more: https://www.muicss.com/docs/v1/react/forms\n\n\n### Extra Components\n\u003e Extra components that it's created on MUI Preact.js Library.\n\n#### Modal\n\n```javascript\nimport {h, Component, render} from 'preact';\nimport Appbar from 'preact-mui/lib/appbar';\nimport Button from 'preact-mui/lib/button';\nimport Container from 'preact-mui/lib/container';\nimport Modal from 'preact-mui/lib/modal'\n\n/**\n * @class Modal\n *\n * @param { string } openedBy The element Id that when clicked, \n * will open the modal\n *\n * @param { string } closedBy The element Id that when clicked, \n * will close the modal\n *\n * @param { function } onClose The hanlder that will trigger, \n * when you close the Modal\n *\n * @param { string } position The position of container modal.\n * Can be: center, centerLeft, centerRight, centerTop, centerBottom\n * If you set some of these positions, the modal will appear on this position\n */\nclass Example extends React.Component {\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cAppbar\u003e\u003c/Appbar\u003e\n        \u003cContainer fluid={true}\u003e\n          \u003cModal \n            openedBy=\"buttonModal\"\n            closedBy=\"buttonClose\"\n            onClose={ \n              () =\u003e { \n                console.log('Modal Closed.')\n              }\n            }\u003e\n            \u003ch1\u003eI am a children of Modal Component\u003c/h1\u003e\n            \u003cButton id=\"buttonClose\"\u003eClose Modal\u003c/Button\u003e\n          \u003c/Modal\u003e\n          \u003cButton color=\"primary\" id=\"buttonModal\"\u003eOpen Modal\u003c/Button\u003e\n        \u003c/Container\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\nrender(\u003cExample /\u003e, document.getElementById('example'));\n```\n\n## CSS Helpers\n\n```html\n\u003c!-- animation --\u003e\n\u003cdiv class=\"mui--no-transition\"\u003e\u003c/div\u003e\n\n\u003c!-- alignment --\u003e\n\u003cdiv class=\"mui--text-left\"\u003e\u003c/div\u003e\n\u003cdiv class=\"mui--text-right\"\u003e\u003c/div\u003e\n\u003cdiv class=\"mui--text-center\"\u003e\u003c/div\u003e\n\u003cdiv class=\"mui--text-justify\"\u003e\u003c/div\u003e\n\u003cdiv class=\"mui--text-nowrap\"\u003e\u003c/div\u003e\n\u003cdiv class=\"mui--align-baseline\"\u003e\u003c/div\u003e\n\u003cdiv class=\"mui--align-top\"\u003e\u003c/div\u003e\n\u003cdiv class=\"mui--align-middle\"\u003e\u003c/div\u003e\n\u003cdiv class=\"mui--align-bottom\"\u003e\u003c/div\u003e\n\n\u003c!-- depth helpers --\u003e\n\u003cdiv class=\"mui--z1\"\u003e\u003c/div\u003e\n\u003cdiv class=\"mui--z2\"\u003e\u003c/div\u003e\n\u003cdiv class=\"mui--z3\"\u003e\u003c/div\u003e\n\u003cdiv class=\"mui--z4\"\u003e\u003c/div\u003e\n\u003cdiv class=\"mui--z5\"\u003e\u003c/div\u003e\n\n\u003c!-- float helpers --\u003e\n\u003cdiv class=\"mui--clearfix\"\u003e\u003c/div\u003e\n\u003cdiv class=\"mui--pull-right\"\u003e\u003c/div\u003e\n\u003cdiv class=\"mui--pull-left\"\u003e\u003c/div\u003e\n\n\u003c!-- toggle helpers --\u003e\n\u003cdiv class=\"mui--hide\"\u003e\u003c/div\u003e\n\u003cdiv class=\"mui--show\"\u003e\u003c/div\u003e\n\u003cdiv class=\"mui--invisible\"\u003e\u003c/div\u003e\n\u003cdiv class=\"mui--overflow-hidden\"\u003e\u003c/div\u003e\n\n\u003c!-- responsive utilities --\u003e\n\u003cdiv class=\"mui--visible-xs-block\"\u003e\u003c/div\u003e\n\u003cdiv class=\"mui--visible-xs-inline\"\u003e\u003c/div\u003e\n\u003cdiv class=\"mui--visible-xs-inline-block\"\u003e\u003c/div\u003e\n\u003cdiv class=\"mui--visible-sm-block\"\u003e\u003c/div\u003e\n\u003cdiv class=\"mui--visible-sm-inline\"\u003e\u003c/div\u003e\n\u003cdiv class=\"mui--visible-sm-inline-block\"\u003e\u003c/div\u003e\n\u003cdiv class=\"mui--visible-md-block\"\u003e\u003c/div\u003e\n\u003cdiv class=\"mui--visible-md-inline\"\u003e\u003c/div\u003e\n\u003cdiv class=\"mui--visible-md-inline-block\"\u003e\u003c/div\u003e\n\u003cdiv class=\"mui--visible-lg-block\"\u003e\u003c/div\u003e\n\u003cdiv class=\"mui--visible-lg-inline\"\u003e\u003c/div\u003e\n\u003cdiv class=\"mui--visible-lg-inline-block\"\u003e\u003c/div\u003e\n\u003cdiv class=\"mui--hidden-xs\"\u003e\u003c/div\u003e\n\u003cdiv class=\"mui--hidden-sm\"\u003e\u003c/div\u003e\n\u003cdiv class=\"mui--hidden-md\"\u003e\u003c/div\u003e\n\u003cdiv class=\"mui--hidden-lg\"\u003e\u003c/div\u003e\n\n\u003c!-- typograpy --\u003e\n\u003cdiv class=\"mui--text-display4\"\u003e\u003c/div\u003e\n\u003cdiv class=\"mui--text-display3\"\u003e\u003c/div\u003e\n\u003cdiv class=\"mui--text-display2\"\u003e\u003c/div\u003e\n\u003cdiv class=\"mui--text-display1\"\u003e\u003c/div\u003e\n\u003cdiv class=\"mui--text-headline\"\u003e\u003c/div\u003e\n\u003cdiv class=\"mui--text-title\"\u003e\u003c/div\u003e\n\u003cdiv class=\"mui--text-subhead\"\u003e\u003c/div\u003e\n\u003cdiv class=\"mui--text-body2\"\u003eBody2\u003c/div\u003e\n\u003cdiv class=\"mui--text-body1\"\u003eBody1\u003c/div\u003e\n\u003cdiv class=\"mui--text-caption\"\u003eCaption\u003c/div\u003e\n\u003cdiv class=\"mui--text-menu\"\u003eMenu\u003c/div\u003e\n\u003cdiv class=\"mui--text-button\"\u003eButton\u003c/div\u003e\n\n\u003c!-- text color --\u003e\n\u003cdiv class=\"mui--text-dark\"\u003e\u003c/div\u003e\n\u003cdiv class=\"mui--text-dark-secondary\"\u003e\u003c/div\u003e\n\u003cdiv class=\"mui--text-dark-hint\"\u003e\u003c/div\u003e\n\u003cdiv class=\"mui--text-light\"\u003e\u003c/div\u003e\n\u003cdiv class=\"mui--text-light-secondary\"\u003e\u003c/div\u003e\n\u003cdiv class=\"mui--text-light-hint\"\u003e\u003c/div\u003e\n\u003cdiv class=\"mui--text-accent\"\u003e\u003c/div\u003e\n\u003cdiv class=\"mui--text-accent-secondary\"\u003e\u003c/div\u003e\n\u003cdiv class=\"mui--text-accent-hint\"\u003e\u003c/div\u003e\n\u003cdiv class=\"mui--text-danger\"\u003e\u003c/div\u003e\n\u003cdiv class=\"mui--text-black\"\u003e\u003c/div\u003e\n\u003cdiv class=\"mui--text-white\"\u003e\u003c/div\u003e\n\n\u003c!-- background color --\u003e\n\u003cdiv class=\"mui--bg-primary\"\u003e\u003c/div\u003e\n\u003cdiv class=\"mui--bg-primary-dark\"\u003e\u003c/div\u003e\n\u003cdiv class=\"mui--bg-primary-light\"\u003e\u003c/div\u003e\n\u003cdiv class=\"mui--bg-accent\"\u003e\u003c/div\u003e\n\u003cdiv class=\"mui--bg-accent-dark\"\u003e\u003c/div\u003e\n\u003cdiv class=\"mui--bg-accent-light\"\u003e\u003c/div\u003e\n\u003cdiv class=\"mui--bg-danger\"\u003e\u003c/div\u003e\n\n\u003c!-- user select --\u003e\n\u003cdiv class=\"mui--no-user-select\"\u003e\u003c/div\u003e\n\n\u003c!-- appbar dimension helpers --\u003e\n\u003cdiv class=\"mui--appbar-height\"\u003e\u003c/div\u003e\n\u003cdiv class=\"mui--appbar-min-height\"\u003e\u003c/div\u003e\n\u003cdiv class=\"mui--appbar-line-height\"\u003e\u003c/div\u003e\n\n\u003c!-- list helpers --\u003e\n\u003cul class=\"mui-list--unstyled\"\u003e\u003c/ul\u003e\n\u003cul class=\"mui-list--inline\"\u003e\u003c/ul\u003e\n```\n\n### License\n\n[MIT]\n\n\n[Preact]: https://github.com/developit/preact\n[MUICSS]: https://facebook.github.io/react/docs/context.html\n[MIT]: http://choosealicense.com/licenses/mit/\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluisvinicius167%2Fpreact-mui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fluisvinicius167%2Fpreact-mui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluisvinicius167%2Fpreact-mui/lists"}