{"id":31980807,"url":"https://github.com/deminearchiver/material-solid","last_synced_at":"2026-04-20T14:06:06.677Z","repository":{"id":248742460,"uuid":"829555463","full_name":"deminearchiver/material-solid","owner":"deminearchiver","description":"Material Components for SolidJS","archived":false,"fork":false,"pushed_at":"2024-10-10T12:39:59.000Z","size":3621,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-11-23T10:03:14.500Z","etag":null,"topics":["design-system","material","material-design","material-you","solidjs","web"],"latest_commit_sha":null,"homepage":"https://material-solid.pages.dev","language":"TypeScript","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/deminearchiver.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-07-16T17:05:17.000Z","updated_at":"2025-11-07T19:37:22.000Z","dependencies_parsed_at":"2025-10-15T03:06:02.734Z","dependency_job_id":"bd2b5643-5a68-4e51-9269-a26e4114d5c6","html_url":"https://github.com/deminearchiver/material-solid","commit_stats":null,"previous_names":["deminearchiver/material-solid"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/deminearchiver/material-solid","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deminearchiver%2Fmaterial-solid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deminearchiver%2Fmaterial-solid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deminearchiver%2Fmaterial-solid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deminearchiver%2Fmaterial-solid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/deminearchiver","download_url":"https://codeload.github.com/deminearchiver/material-solid/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deminearchiver%2Fmaterial-solid/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32050454,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-20T11:35:06.609Z","status":"ssl_error","status_checked_at":"2026-04-20T11:34:48.899Z","response_time":94,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: 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":["design-system","material","material-design","material-you","solidjs","web"],"created_at":"2025-10-15T00:41:46.979Z","updated_at":"2026-04-20T14:06:06.643Z","avatar_url":"https://github.com/deminearchiver.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003e [!NOTE]\n\u003e ### Project status\n\u003e The project is in its early stages of development.\n\u003e Although some components are considered to be feature-complete, I'm planning on adding a lot of global features which will most certainly break most of the components.\n\u003e\n\u003e Use this library at your own risk!\n\n---\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://github.com/deminearchiver/material-solid\"\u003e\n    \u003cimg src=\".github/images/banner.svg\" height=\"144\"\u003e\n  \u003c/a\u003e\n  \u003ch3\u003eMaterial Solid\u003c/h3\u003e\n  Material Components for SolidJS\n  \u003cbr\u003e\n  \u003cbr\u003e\n  \u003cp\u003e\n    \u003ca href=\"https://material-solid.pages.dev\"\u003e\n      \u003cb\u003eWebsite\u003c/b\u003e\n    \u003c/a\u003e\n    ·\n    \u003ca href=\"https://github.com/deminearchiver/material-solid\"\u003e\n      \u003cb\u003eRepository\u003c/b\u003e\n    \u003c/a\u003e\n    ·\n    \u003ca href=\"https://github.com/deminearchiver/material-solid/issues\"\u003e\n      \u003cb\u003eReport a bug\u003c/b\u003e\n    \u003c/a\u003e\n    ·\n    \u003ca href=\"https://github.com/deminearchiver/material-solid/issues\"\u003e\n      \u003cb\u003eRequest a feature\u003c/b\u003e\n    \u003c/a\u003e\n  \u003c/p\u003e\n\u003c/div\u003e\n\n---\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ch4\u003eTable of contents\u003ch4\u003e\u003c/summary\u003e\n\n- [About](#about)\n  - [Why?](#why)\n  - [Existing libraries](#existing-libraries)\n  - [Regarding library choices](#regarding-library-choices)\n- [Usage](#usage)\n  - [Installation](#installation)\n- [Contributing](#contributing)\n- [License](#license)\n\n\u003c/details\u003e\n\n## About\n\n### Why?\n\nThere are a few problems with the official [**Material Web**](https://material-web.dev) library:\n\n1. Using Web Components in JSX isn't comfortable enough\n    \u003e In order to use them properly you'd have to create TypeScript definitions, and often wrapper components\n\n2. Web Components register global tag names.\n    \u003e I'm paranoid about global naming conflicts\n\n3. The library isn't verbose enough.\n    \u003e The thing I don't like the most is the `md` prefix.\n\n4. It lacks more complex components\n    \u003e I'm talking about the [Carousel](https://m3.material.io/components/carousel/overview), [Search](https://m3.material.io/components/search/overview), [Date pickers](https://m3.material.io/components/date-pickers/overview), [Time pickers](https://m3.material.io/components/time-pickers/overview), as well as newly redesigned components: [Sliders](https://m3.material.io/components/sliders/overview) and [Progress indicators](https://m3.material.io/components/progress-indicators/overview), and many more.\n\n5. Recently MWC has been [**put into maintenance mode**](https://github.com/material-components/material-web/discussions/5642).\n    \u003e This is a big 🚩 *[red flag]* for anyone using MWC.\n\n### Existing libraries\n\nThere are some really good attempts at implementing the new [**Material You**](https://m3.material.io) version of Material Design, but none are close to being complete:\n\n- [\u003cimg src=\".github/images/react.svg\" height=\"12\"\u003e **Actify**](https://actifyjs.com)\n  - most of the components aren't spec compliant (it's bigger of a deal than you think!)\n- [\u003cimg src=\".github/images/react.svg\" height=\"12\"\u003e **Material Toys**](https://actifyjs.com):\n  - a very good **Ripple** implementation, although usage of CSS filters raises some performance questions\n  - certain components do not have animations ([Checkbox](https://www.material-toys.com/checkbox), [Radio Button](https://www.material-toys.com/radio-button))\n  - some components aren't spec compliant ([Switch](https://www.material-toys.com/switch))\n\n### Regarding library choices\n\n\u003e I have never used React since I started using Solid.\n\nI chose SolidJS over React because the former is more performant, offers fine-grained reactivity, and has a better developer experience. SolidJS has amazing community-maintained tooling, such as [**Solid Primitives**](https://primitives.solidjs.community).\n\n[**Vanilla Extract**](https://vanilla-extract.style) is used for styling because it brings awesome developer experience (although it has its own flaws). I'm planning to expand on styling and add support for custom *\"style adapters\"* in the distant future.\n\n\n## Usage\n\n### Installation\n\nWhile `@material-solid/components` and `@material-solid/vanilla-extract` are required dependencies, `@material-solid/utils` is optional but contains many useful primitives related to SolidJS and Vanilla Extract, which may improve your developer experience.\n\n\u003cdetails\u003e\n  \u003csummary\u003enpm\u003c/summary\u003e\n\n  ```sh\n  npm install @material-solid/components @material-solid/vanilla-extract @material-solid/utils\n  ```\n\u003c/details\u003e\n\u003cdetails\u003e\n  \u003csummary\u003epnpm\u003c/summary\u003e\n\n  ```sh\n  pnpm install @material-solid/components @material-solid/vanilla-extract @material-solid/utils\n  ```\n\u003c/details\u003e\n\u003cdetails\u003e\n  \u003csummary\u003eYarn\u003c/summary\u003e\n\n  ```sh\n  yarn add @material-solid/components @material-solid/vanilla-extract @material-solid/utils\n  ```\n\u003c/details\u003e\n\u003cdetails\u003e\n  \u003csummary\u003eBun\u003c/summary\u003e\n\n  ```sh\n  bun add @material-solid/components @material-solid/vanilla-extract @material-solid/utils\n  ```\n\u003c/details\u003e\n\n## Contributing\n\nPlease refer to [**CONTRIBUTING.md**](CONTRIBUTING.md).\n\n## License\n\nThis project is license under the [**MIT License**](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeminearchiver%2Fmaterial-solid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdeminearchiver%2Fmaterial-solid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeminearchiver%2Fmaterial-solid/lists"}