Note
The project is in its early stages of development. 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.
Use this library at your own risk!
Material Components for SolidJS
There are a few problems with the official Material Web library:
-
Using Web Components in JSX isn't comfortable enough
In order to use them properly you'd have to create TypeScript definitions, and often wrapper components
-
Web Components register global tag names.
I'm paranoid about global naming conflicts
-
The library isn't verbose enough.
The thing I don't like the most is the
mdprefix. -
It lacks more complex components
I'm talking about the Carousel, Search, Date pickers, Time pickers, as well as newly redesigned components: Sliders and Progress indicators, and many more.
-
Recently MWC has been put into maintenance mode.
This is a big 🚩 [red flag] for anyone using MWC.
There are some really good attempts at implementing the new Material You version of Material Design, but none are close to being complete:
Actify
- most of the components aren't spec compliant (it's bigger of a deal than you think!)
- Material Toys:
- a very good Ripple implementation, although usage of CSS filters raises some performance questions
- certain components do not have animations (Checkbox, Radio Button)
- some components aren't spec compliant (Switch)
I have never used React since I started using Solid.
I 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.
Vanilla Extract 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.
While @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.
npm
npm install @material-solid/components @material-solid/vanilla-extract @material-solid/utilspnpm
pnpm install @material-solid/components @material-solid/vanilla-extract @material-solid/utilsYarn
yarn add @material-solid/components @material-solid/vanilla-extract @material-solid/utilsBun
bun add @material-solid/components @material-solid/vanilla-extract @material-solid/utilsPlease refer to CONTRIBUTING.md.
This project is license under the MIT License.