https://github.com/matraic/m3e
Material 3 Expressive Web Components
https://github.com/matraic/m3e
lit material-3-expressive material-design material-you material3 web web-components
Last synced: 4 days ago
JSON representation
Material 3 Expressive Web Components
- Host: GitHub
- URL: https://github.com/matraic/m3e
- Owner: matraic
- License: mit
- Created: 2025-09-21T04:34:59.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2026-04-25T22:12:37.000Z (4 days ago)
- Last Synced: 2026-04-25T23:30:12.138Z (4 days ago)
- Topics: lit, material-3-expressive, material-design, material-you, material3, web, web-components
- Language: TypeScript
- Homepage: https://matraic.github.io/m3e/
- Size: 3.5 MB
- Stars: 105
- Watchers: 1
- Forks: 12
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
- Roadmap: ROADMAP.md
Awesome Lists containing this project
- awesome-lit - M3E - Web Components implementing Material 3 Expressive. (Component Libraries)
README
# M3E
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.
## 📝 Overview
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.
## 🛡️ Disclaimer
This project is not affiliated with or endorsed by Google. “Material Design” and “Material 3” are trademarks of Google LLC.
## ✨ Features
- **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.
## 🚀 Getting Started
1. Clone the repository:
```
git clone https://github.com/matraic/m3e.git
```
2. Install dependencies:
```
npm install
```
3. Explore individual packages for usage instructions and documentation.
## 🛠️ Building
This monorepo uses npm scripts for building, analyzing, linting, and cleaning packages. Common commands:
- `npm run build` — Build all packages
- `npm run cem` — Run custom elements manifest analysis
- `npm run lint` — Lint all packages
- `npm run all` — Build, analyze, and lint in one step
- `npm run clean` — Remove build output
## 📦 Packages
Below is a list of all packages in this monorepo, with a short summary and installation instructions for each:
| Package | Summary | Installation |
| -------------------------------------------- | -------------------------------------- | ------------------------ |
| [**@m3e/web**](./packages/web/README.md) | Platform‑native Web Components for M3E | `npm install @m3e/web` |
| [**@m3e/react**](./packages/react/README.md) | React bindings for M3E Web Components | `npm install @m3e/react` |
| [**@m3e/icons**](./packages/icons/README.md) | Icons for M3E Web Components | `npm install @m3e/icons` |
## 📍 Roadmap
For a detailed view of current development, planned components, and past milestones, see the [M3E Roadmap](ROADMAP.md).
## 🤝 Contributing
Contributions from the community are welcome! Please review the [Contributing Guidelines](CONTRIBUTING.md) and help us advance the future of expressive web design.
### Preview builds for pull requests and pushes
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.
#### Pull request builds
To install a preview build for any PR:
```sh
npm install pkg.pr.new/matraic/m3e/pull/
```
#### Commit builds
To install a preview build for a specific commit:
```sh
npm install pkg.pr.new/matraic/m3e/commit/
```
## 📄 License
This project is licensed under the MIT License.
## 🧪 Testing
This project is tested with BrowserStack