@m3e/web

@m3e/web

@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: 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.

📦 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