{"id":13766216,"url":"https://github.com/kradio3/react-mdc-web","last_synced_at":"2025-05-10T21:33:12.878Z","repository":{"id":15576063,"uuid":"78412989","full_name":"kradio3/react-mdc-web","owner":"kradio3","description":"Material Design Components for React","archived":false,"fork":false,"pushed_at":"2022-12-06T18:05:45.000Z","size":3593,"stargazers_count":174,"open_issues_count":34,"forks_count":23,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-11T10:46:51.436Z","etag":null,"topics":["css","design","material","mdc","react","web"],"latest_commit_sha":null,"homepage":"https://kradio3.github.io/react-mdc-web/","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/kradio3.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-09T09:17:48.000Z","updated_at":"2024-09-23T14:18:58.000Z","dependencies_parsed_at":"2023-01-14T00:15:10.518Z","dependency_job_id":null,"html_url":"https://github.com/kradio3/react-mdc-web","commit_stats":null,"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kradio3%2Freact-mdc-web","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kradio3%2Freact-mdc-web/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kradio3%2Freact-mdc-web/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kradio3%2Freact-mdc-web/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kradio3","download_url":"https://codeload.github.com/kradio3/react-mdc-web/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253486249,"owners_count":21916134,"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":["css","design","material","mdc","react","web"],"created_at":"2024-08-03T16:00:52.692Z","updated_at":"2025-05-10T21:33:12.057Z","avatar_url":"https://github.com/kradio3.png","language":"JavaScript","funding_links":[],"categories":["Material Components Web (MDC Web)"],"sub_categories":["MDC Web Framework Integrations"],"readme":"# [Material components for React](https://kradio3.github.io/react-mdc-web/)\n[![Maintenance Status][status-image]][status-url] [![NPM version][npm-image]][npm-url] [![Travis build][travis-image]][travis-url]\n\nReact components based on styles from [Material Design Components Web project](https://github.com/material-components/material-components-web). Components are written in React.js. Doesn't use MDC foundation classes.\n\n## Installation\nFrom CDN\n```html\n\u003cscript src=\"https://unpkg.com/react-mdc-web/out/react-mdc-web.js\"\u003e\u003c/script\u003e\n```\nFrom package manager\n```sh\nnpm i --save react-mdc-web\n```\n\n## Theming\n### Default theme\n* Include CSS with default theme into HTML page\n  ```html\n  \u003clink rel=\"stylesheet\" href=\"https://unpkg.com/material-components-web@0.23.0/dist/material-components-web.min.css\"\u003e\n  ```\n* Or import it into JS/JSX file\n  ```javascript\n  // MyApp/index.js\n  import 'material-components-web/dist/material-components-web.min.css';\n  ```\n### Custom theme\nOverride default theme colors with Sass or with CSS Custom Properties, just follow these guides:\n  * [Changing the theme with Sass](https://github.com/material-components/material-components-web/blob/master/docs/theming.md#step-3-changing-the-theme-with-sass)\n  * [Changing the theme with CSS Custom Properties](https://github.com/material-components/material-components-web/blob/master/docs/theming.md#step-4-changing-the-theme-with-css-custom-properties)\n\n## Usage\n```js\nimport React, { Component } from 'react'\nimport {Card, CardHeader, CardTitle, CardText, CardActions, Button} from 'react-mdc-web/lib';\n\nclass MyComponent extends Component {\n  render() {\n    return (\n        \u003cCard\u003e\n          \u003cCardHeader\u003e\n            \u003cCardTitle\u003e\n              Title goes here\n            \u003c/CardTitle\u003e\n          \u003c/CardHeader\u003e\n          \u003cCardText\u003e\n            Lorem ipsum dolor sit amet, sint adipiscing ius eu\n          \u003c/CardText\u003e\n          \u003cCardActions\u003e\n            \u003cButton compact\u003eSave\u003c/Button\u003e\n            \u003cButton compact accent\u003eRemove\u003c/Button\u003e\n          \u003c/CardActions\u003e\n        \u003c/Card\u003e\n    );\n  }\n}\n\n```\nMore samples could be found on the [Documentation Site](https://kradio3.github.io/react-mdc-web/)\n\n## Contribution \u0026 Local Development Guide\n\n1. create parent folder react-mdc-web-dev\n1. clone/fork react-mdc-web inside the react-mdc-web-dev folder\n1. create app for testing (for example: git clone https://github.com/kradio3/react-mdc-web-showcase)\n1. should now have folder with react-mdc-web-showcase and react-mdc-web folders inside of it.\n1. cd react-mdc-web-showcase\n1. npm rm --save-dev react-mdc-web\n1. npm i --save-dev ../react-mdc-web\n1. npm i --save-dev material-components-web\n1. npm start\n1. cd ../react-mdc-web\n1. npm run watch\n\n## License\nMIT, see [LICENSE](/LICENSE) for details\n\n[status-image]: https://img.shields.io/badge/status-maintained-brightgreen.svg\n[status-url]: https://github.com/kradio3/react-mdc-web\n\n[npm-image]: https://img.shields.io/npm/v/react-mdc-web.svg\n[npm-url]: https://www.npmjs.com/package/react-mdc-web\n\n[travis-image]: https://travis-ci.org/kradio3/react-mdc-web.svg?branch=master\n[travis-url]: https://travis-ci.org/kradio3/react-mdc-web\n\n[license-image]: https://img.shields.io/badge/license-MIT-blue.svg\n[license-url]: https://raw.githubusercontent.com/kradio3/react-mdc-web/master/LICENSE\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkradio3%2Freact-mdc-web","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkradio3%2Freact-mdc-web","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkradio3%2Freact-mdc-web/lists"}