Get Started
What’s MDC?
The mdc in “@sandlada/mdc” refers to “Material Design Component”. MDC is a Material Design 3 style Web Component library.
What’s Material Design
Material Design is a consistent design system developed by Google for Android devices, mobile devices, and web pages. The latest version of Material Design is Material Design 3, and its latest design improvement is called “Expressive”.
Why MDC?
MDC is a cross-framework Web Component library written by Lit framework.
Web Component is a modern browser standard, and all major browsers on the market support Web Component. It runs just like a native API.
This means you can use Web Component on any JS front-end framework, whether it is Vue, Angular, React or Astro.
Why develop this project?
The starting point of our development of this project is entirely based on our interest and passion for Material Design. Perhaps you can find that the vast majority of all our projects are in Material Design style, and we have not touched any other design systems.
Material Design has a history of more than ten years, which is enough for a design system to evolve for several generations. Material Design is almost the most common design solution, and it dominates the Android market. This is enough to prove the reliability and completeness of Material Design.
Can I trust this project?
If you are an explorer, or you are interested in Material Design, you can try our project. If you are looking for a commercial solution, please do not use this project. We cannot bear any commercial losses caused by this project.
Roadmap & Issues
Discussions about MDC are all conducted in Github.
Support
Because MDC is written by Lit framework, and the target version of Lit framework is ES2021, the target version of @sandlada/mdc is ES2022.
We chose ES2022 instead of ES2021 because of the changing times. ES2022 and new ES features are being fully supported by more and more browsers.
When will the official version be released
MDC is expected to complete the first official version 1.0.0
in 2027.
Don’t despair, you can still download our preview builds via npm.