@m3e/web
May 1, 2026 · View on GitHub
@m3e/web is a modern, from‑scratch implementation of Material Design 3, built entirely with Web Components. It delivers a complete, spec‑aligned component suite with dynamic color, expressive motion, and full accessibility — all without framework dependencies.
🔗 Showcase & Documentation
Explore the full component suite, live demos, and usage examples:
https://matraic.github.io/m3e
🛡️ 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.
📦 Modules
Below is a list of all modules in this monorepo, with a short summary and import instructions for each:
| Package | Summary | Import |
|---|---|---|
| @m3e/web/app-bar | A prominent UI component providing access to key actions, navigation, and contextual info at the top of an app screen. | import "@m3e/web/app-bar"; |
| @m3e/web/autocomplete | Enhances a text input with a dynamically positioned menu of filterable suggestions, providing real-time filtering and keyboard navigation. | import "@m3e/web/autocomplete"; |
| @m3e/web/avatar | An image, icon or textual initials representing a user or other identity. | import "@m3e/web/avatar"; |
| @m3e/web/badge | A compact visual indicator for counts, presence, or emphasis, attachable to icons, buttons, or other components. | import "@m3e/web/badge"; |
| @m3e/web/bottom-sheet | A sheet used to show secondary content anchored to the bottom of the screen. | import "@m3e/web/bottom-sheet"; |
| @m3e/web/breadcrumb | Displays a hierarchical navigation path and identifies the user's current location within an application. | import "@m3e/web/breadcrumb"; |
| @m3e/web/button | A semantic, expressive UI primitive for actions, supporting five variants and dynamic theming. | import "@m3e/web/button"; |
| @m3e/web/button-group | Organizes buttons and adds interactions between them. | import "@m3e/web/button-group"; |
| @m3e/web/calendar | A calendar used to select a date. | import "@m3e/web/calendar"; |
| @m3e/web/card | A flexible, expressive container for presenting a unified subject—text, media, and actions—on a distinct surface. | import "@m3e/web/card"; |
| @m3e/web/checkbox | An expressive, accessible control for binary selection—supporting checked, indeterminate, and disabled states. | import "@m3e/web/checkbox"; |
| @m3e/web/chips | Expressive, accessible chip components for actions, input, filtering, and suggestions. | import "@m3e/web/chips"; |
| @m3e/web/content-pane | A shaped surface for vertically scrollable content. | import "@m3e/web/content-pane"; |
| @m3e/web/core | Essential primitives, utilities, and behavioral mixins for building Material 3 web components. | import "@m3e/web/core"; |
| @m3e/web/datepicker | Presents a date picker on a temporary surface. | import "@m3e/web/datepicker"; |
| @m3e/web/dialog | Presents important prompts, alerts, and actions with ARIA accessibility, focus management, and theming. | import "@m3e/web/dialog"; |
| @m3e/web/divider | Visually separates content within layouts, lists, or containers using a thin, unobtrusive line. | import "@m3e/web/divider"; |
| @m3e/web/drawer-container | Provides a responsive layout container for managing one or two sliding drawers alongside main content. | import "@m3e/web/drawer-container"; |
| @m3e/web/expansion-panel | Expressive, accessible components for organizing content in collapsible sections and coordinated groups. | import "@m3e/web/expansion-panel"; |
| @m3e/web/fab | A prominent, expressive floating action button (FAB) representing the primary action on a screen. | import "@m3e/web/fab"; |
| @m3e/web/fab-menu | Presents a dynamic menu of related actions, elegantly revealed from a floating action button (FAB). | import "@m3e/web/fab-menu"; |
| @m3e/web/form-field | A container for form controls that applies Material Design styling and behavior. | import "@m3e/web/form-field"; |
| @m3e/web/heading | Expressive, accessible headings for pages and sections, supporting display, headline, title, and label variants in multiple sizes. | import "@m3e/web/heading"; |
| @m3e/web/icon | Makes it easy to use Material Symbols, supporting outlined, rounded, and sharp variants with variable font features. | import "@m3e/web/icon"; |
| @m3e/web/icon-button | A semantic, expressive UI primitive for triggering actions with a single icon, supporting four visual variants. | import "@m3e/web/icon-button"; |
| @m3e/web/list | Expressive, accessible components for organizing and displaying lists of items, with rich content and theming. | import "@m3e/web/list"; |
| @m3e/web/loading-indicator | Uses animation to indicate that an activity is in progress, with contained and uncontained variants. | import "@m3e/web/loading-indicator"; |
| @m3e/web/menu | Anchored, elevated surfaces that present a list of choices—supporting selection, hierarchy, and contextual interaction. | import "@m3e/web/menu"; |
| @m3e/web/nav-bar | Navigation bar and interactive items for switching between primary destinations, designed for smaller devices. | import "@m3e/web/nav-bar"; |
| @m3e/web/nav-menu | Hierarchical, accessible navigation menu for sidebars, drawers, and complex menu structures. | import "@m3e/web/nav-menu"; |
| @m3e/web/nav-rail | Extends nav-bar to provide a vertical navigation rail for larger devices, supporting compact and expanded modes. | import "@m3e/web/nav-rail"; |
| @m3e/web/option | Provides selectable options and interactive menus for choosing values from a temporary surface. | import "@m3e/web/option"; |
| @m3e/web/paginator | Provides navigation for paged information, typically used with a table. | import "@m3e/web/paginator"; |
| @m3e/web/progress-indicator | Accessible, animated progress indicators for tracking task or process completion. | import "@m3e/web/progress-indicator"; |
| @m3e/web/radio-group | A single-selection control for choosing one option from a set—supporting expressive styling, accessible transitions, and validation feedback. | import "@m3e/web/radio-group"; |
| @m3e/web/search | Provides a search bar for input and a search view for suggestions, history, and results. | import "@m3e/web/search"; |
| @m3e/web/segmented-button | A multi-option control for grouped selection—supporting single or multiple active segments with expressive layout, ripple feedback, and accessible state transitions. | import "@m3e/web/segmented-button"; |
| @m3e/web/select | A form control for single and multiple selection that integrates with m3e-option and m3e-form-field. | import "@m3e/web/select"; |
| @m3e/web/shape | Allows use of abstract shapes for emphasis and decorative flair, including built-in shape morphing. | import "@m3e/web/shape"; |
| @m3e/web/skeleton | A visual placeholder that mimics the layout of content while it's still loading. | import "@m3e/web/skeleton"; |
| @m3e/web/slide-group | Presents pagination controls used to scroll overflowing content. | import "@m3e/web/slide-group"; |
| @m3e/web/slider | Allows for the selection of numeric values from a range. | import "@m3e/web/slider"; |
| @m3e/web/snackbar | Provides a global service for presenting short updates about application processes at the bottom of the screen. | import "@m3e/web/snackbar"; |
| @m3e/web/split-button | A button used to show an action with a menu of related actions. | import "@m3e/web/split-button"; |
| @m3e/web/split-pane | A dual-view layout that separates content with a movable drag handle. | import "@m3e/web/split-pane"; |
| @m3e/web/stepper | Provides a wizard-like workflow by dividing content into logical steps. | import "@m3e/web/stepper"; |
| @m3e/web/switch | An on/off control that can be toggled by clicking. | import "@m3e/web/switch"; |
| @m3e/web/tabs | Organizes content into separate views where only one view can be visible at a time. | import "@m3e/web/tabs"; |
| @m3e/web/textarea-autosize | A non-visual element used to automatically resize a textarea to fit its content. | import "@m3e/web/textarea-autosize"; |
| @m3e/web/theme | A non-visual element used to apply dynamic color, expressive motion, density, and focus indicators to nested elements. | import "@m3e/web/theme"; |
| @m3e/web/toc | Hierarchical, interactive table of contents for in-page navigation, with automatic heading detection. | import "@m3e/web/toc"; |
| @m3e/web/toolbar | Presents contextual actions, navigation, and controls, supporting orientation, shape, and variant customization. | import "@m3e/web/toolbar"; |
| @m3e/web/tooltip | Provides contextual information in response to user interaction, positioned relative to a target element. | import "@m3e/web/tooltip"; |
| @m3e/web/tree | Presents hierarchical data in a tree structure. | import "@m3e/web/tree"; |
📍 Roadmap
For a detailed view of current development, planned components, and past milestones, see the M3E Roadmap.
🤝 Contributing
Contributions from the community are welcome! Please review the Contributing Guidelines and help us advance the future of expressive web design.
📄 License
This project is licensed under the MIT License.
🧪 Testing
This project is tested with BrowserStack