A modern, fully-featured Material Design 3 (Material You) Web Component library built with Lit.
Google's official @material/web component library has entered maintenance mode, leaving a void for developers who need actively maintained, cutting-edge Material Design 3 components.
@pawel-up/md was built from the ground up to provide a robust, modern, and production-ready implementation of the Material You specification. It delivers dynamic color theming, tonal surfaces, modern shape morphing, and spring-based physics without any legacy dependencies.
- Pure Web Components: Built entirely with Lit, ensuring they are lightweight, fast, and framework-agnostic. Use them seamlessly in Vue, React, Angular, Svelte, or Vanilla JS.
- Material Design 3: Faithfully implements the latest MD3 specifications, avoiding the outdated MD2 legacy code entirely.
- Dynamic Theming: Deep support for dynamic colors, contrast variants, and tonal surface elevation (no more default drop shadows!).
- Accessible by Default: Built with rich ARIA support, keyboard navigation, and focus management out of the box.
- Comprehensive Catalog: Includes everything from foundational buttons, inputs, and menus, to complex dialogs, navigation drawers, and date pickers.
npm install @pawel-up/mdImport the components you need and use them directly in your HTML:
<!DOCTYPE html>
<html lang="en" class="theme-light">
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
<!-- Import the specific components you need -->
<script type="module">
import '@pawel-up/md/button/ui-button.js';
import '@pawel-up/md/icons/ui-icon.js';
</script>
</head>
<body>
<!-- Use them seamlessly -->
<ui-button color="filled">
<ui-icon slot="icon">check</ui-icon>
Submit
</ui-button>
</body>
</html>You can run the interactive documentation and component playground locally. It's powered by VitePress for lightning-fast browsing:
# Install dependencies
npm install
# Start the local documentation server
npm run demo:devThe library uses CSS class-based theming applied to the <html> element to automatically handle light and dark modes mapping to MD3 tokens:
<!-- Light Mode -->
<html class="theme-light">
<!-- Dark Mode -->
<html class="theme-dark">Customize your app's theme by overriding the --md-sys-color-* and --md-sys-typescale-* CSS custom properties.
Apache-2.0 © Pawel Uchida-Psztyc