Skip to content
TopicTracker
From HackerNewsView original
TranslationTranslation

Show HN: Material 3 Expressive Web Components

M3E is a Material Design 3 component library built entirely as native Web Components. It provides a spec-accurate, framework-agnostic implementation with expressive enhancements, dynamic color support, and built-in accessibility.

Background

- **Material Design 3 (Material You)** is Google's current design language (2021–present). Unlike earlier versions, it emphasizes personalization: apps can automatically derive a color palette from the user's wallpaper ("dynamic color"), and it uses a systematic "token" system for theming. - **Web Components** are a set of browser-native APIs (Custom Elements, Shadow DOM, etc.) that let developers create reusable, encapsulated HTML tags without needing a JavaScript framework like React or Vue. - Most production-ready Material 3 libraries target specific frameworks (e.g., Angular Material, MUI for React). This project is an independent, framework-agnostic implementation built entirely from native Web Components, meaning it can drop into any web project — or no framework at all. - The author describes it as "expressive," referencing a recent Material Design initiative (Material 3 "Expressive" themes) that adds more typographic and shape variation beyond the default spec.

Related stories