Welcome to the M3E (Material 3 Expressive) monorepo—a unified collection of robust, customizable Web Components built with the latest Material Design 3 guidelines. This repository empowers developers to create visually rich, adaptive, and accessible user interfaces for modern web applications.
Material 3 (M3) introduces a new era of expressive design, focusing on personalization, dynamic color, and enhanced accessibility. This monorepo provides a comprehensive suite of reusable components, each crafted to deliver seamless integration, consistent theming, and intuitive user experiences.
This project is not affiliated with or endorsed by Google. “Material Design” and “Material 3” are trademarks of Google LLC.
- Expressive Components: Leverage Material 3’s design tokens, dynamic color, shape and motion systems for highly customizable UI elements.
- Unified Architecture: Modularized for easy maintenance, scalability, and rapid development.
- Accessibility First: Built-in support for accessibility standards, ensuring inclusive experiences for all users.
- Theming & Personalization: Effortlessly adapt components to your brand or user preferences with Material 3’s advanced theming capabilities.
- Performance Optimized: Lightweight, fast-loading components designed for modern web platforms.
- Security Conscious: Built with secure-by-default patterns, including XSS-safe templating, Trusted Types compatibility, and support for strong Content Security Policies (CSP) to enforce safe DOM interactions and mitigate injection risks.
- Clone the repository:
git clone https://github.com/matraic/m3e.git - Install dependencies:
npm install - Explore individual packages for usage instructions and documentation.
This monorepo uses npm scripts for building, analyzing, linting, and cleaning packages. Common commands:
npm run build— Build all packagesnpm run cem— Run custom elements manifest analysisnpm run lint— Lint all packagesnpm run all— Build, analyze, and lint in one stepnpm run clean— Remove build output
Below is a list of all packages in this monorepo, with a short summary and installation instructions for each:
| Package | Summary | Installation |
|---|---|---|
| @m3e/web | Platform‑native Web Components for M3E | npm install @m3e/web |
| @m3e/react | React bindings for M3E Web Components | npm install @m3e/react |
For a detailed view of current development, planned components, and past milestones, see the M3E Roadmap.
Contributions from the community are welcome! Please review the Contributing Guidelines and help us advance the future of expressive web design.
Every pull request and every push publishes a preview build of the M3E packages using pkg.pr.new. This makes it easy to test changes locally without cloning the repo or linking workspaces.
Preview builds include the compiled output for both @m3e/web and @m3e/react, matching the structure of a standard npm release.
To install a preview build for any PR:
npm install pkg.pr.new/matraic/m3e/pull/<PR_NUMBER>To install a preview build for a specific commit:
npm install pkg.pr.new/matraic/m3e/commit/<COMMIT_SHA>This project is licensed under the MIT License.
This project is tested with BrowserStack