@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.
Explore the full component suite, live demos, and usage examples:
https://matraic.github.io/m3e
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: ESM-first with modular entry points and tree-shaking for minimal bundles.
- 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.
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"; |
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.
This project is licensed under the MIT License.
This project is tested with BrowserStack