{"id":13422352,"url":"https://github.com/react-materialize/react-materialize","last_synced_at":"2025-05-14T17:03:22.447Z","repository":{"id":24152227,"uuid":"27541956","full_name":"react-materialize/react-materialize","owner":"react-materialize","description":"Material design for react, powered by materializecss","archived":false,"fork":false,"pushed_at":"2023-01-27T10:20:10.000Z","size":24896,"stargazers_count":1381,"open_issues_count":54,"forks_count":299,"subscribers_count":40,"default_branch":"master","last_synced_at":"2025-04-12T01:55:43.193Z","etag":null,"topics":["materialdesign","react"],"latest_commit_sha":null,"homepage":"https://react-materialize.github.io/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/react-materialize.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-12-04T13:36:00.000Z","updated_at":"2025-04-08T20:31:29.000Z","dependencies_parsed_at":"2023-02-15T23:30:26.318Z","dependency_job_id":null,"html_url":"https://github.com/react-materialize/react-materialize","commit_stats":null,"previous_names":[],"tags_count":122,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-materialize%2Freact-materialize","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-materialize%2Freact-materialize/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-materialize%2Freact-materialize/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-materialize%2Freact-materialize/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-materialize","download_url":"https://codeload.github.com/react-materialize/react-materialize/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248505867,"owners_count":21115354,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["materialdesign","react"],"created_at":"2024-07-30T23:00:42.395Z","updated_at":"2025-04-12T01:55:51.004Z","avatar_url":"https://github.com/react-materialize.png","language":"JavaScript","readme":"\u003cimg alt='React Materialize' src=\"https://cloud.githubusercontent.com/assets/4152819/12703340/23b90e56-c841-11e5-933a-99bfa107db07.jpg\" width=\"890\"\u003e\n\n[![Join the chat at https://gitter.im/react-materialize/react-materialize](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/react-materialize/react-materialize?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n[![npm version](http://img.shields.io/npm/v/react-materialize.svg?style=flat)](https://npmjs.org/package/react-materialize \"View this project on npm\")\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat)](https://github.com/prettier/prettier)\n\n\n# [react-materialize](https://react-materialize.github.io/)\n\nMaterial design components for react, powered by [materializecss](http://materializecss.com/).\n\n## Install\n```\nnpm install materialize-css@next\nnpm install react-materialize\n```\n\n## Use\n#### HTML Setup (from [materializecss](http://materializecss.com/))\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003clink rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\"\u003e\n    \u003clink rel=\"stylesheet\" href=\"path/to/materialize.css\"\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cscript src=\"path/to/your/bundle.js\"\u003e\u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n#### Javascript\n``` js\nimport 'materialize-css';\nimport { Button, Card, Row, Col } from 'react-materialize';\n```\n\n##### Note\n`materialize-css` exposes css via `style` field in `package.json`, if you have another tool for CSS that\nidentifies this field you can remove the import from `index.html`.\n\n## Docs \u0026\u0026 Examples\n\nSee [documentation](https://react-materialize.github.io) for live examples. Try out the [boilerplate](https://github.com/react-materialize/webpack-boilplate).\n\n#### How does it compare to X.Y.Z?\n\nThe main goal of this project is to provide react component for\n[materializecss](http://materializecss.com), at the current stage, I am\ntrying to implement all possible widgets that are supported by materializecss.\nPlease create an issue on github if you find you desired component is not\navailable.\n\nThere are other material design components for react.js, e.g. [material-ui](http://material-ui.com/),\nwhich is more mature and popular than this one.\nThe main advantage of this project over e.g. material-ui is that it provides a\ngrid system similar to react-bootstrap. Another advantage over material-ui is that react-materialize does not \ninclude css in the js - which can be cumbersome to some project's architecture.\n\n## Contributions\n\n\u003e Yes, please!\n\nWe have a `help-wanted` label in the issues page for convenience\n\n### Deployment workflow\n\nWe are now using github actions. For every push, `test` action will run.\n\nTo publish a new version update the package version, update the change log and create a PR.\nOnce merged to master push tags `git push --tags` and create a new release.\n\n## Support\n\nThis library is only a react wrapper around the awesome [materializecss](http://materializecss.com), if you or \nyour company uses this library please support them, all this work requires time :) ✌️\n","funding_links":[],"categories":["UI Frameworks","Uncategorized","React","Cases","JavaScript","\u003ca name=\"JavaScript\"\u003e\u003c/a\u003eJavaScript"],"sub_categories":["Responsive","Uncategorized","Frameworks"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-materialize%2Freact-materialize","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-materialize%2Freact-materialize","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-materialize%2Freact-materialize/lists"}