Material 3 Expressive Web Components: The Community-Driven Library You've Been Waiting For

Try the Live Demo First

👉 See Material 3 Components in Action - Interactive demo with all components, code examples, and real-world usage patterns.

The Material Design 3 Gap

For years, developers have been waiting for Google to release an official Material Design 3 web components library. While Material 3 (Material You) has been available for Android and Flutter, the web lacks a comprehensive Material 3 Expressive implementation.

@banegasn/components is the community-driven Material 3 Expressive web components library that fills this gap. It's open-source, actively maintained, and brings Google's beautiful Material 3 design language to web applications through framework-agnostic web components.

🎨 What is Material 3 Expressive?

Material 3 Expressive is Google's evolution of Material Design, featuring dynamic colors, expressive typography, and fluid interactions that adapt to user preferences - the design system powering Google's latest products.

Why This Material 3 Web Component Library?

Framework-Agnostic - Built with Lit and modern web standards. Works with Angular, React, Vue, Svelte, or vanilla JavaScript. These Material 3 web components are true standard web components (Custom Elements + Shadow DOM), ensuring compatibility across frameworks.

Available Material Design 3 Components:

  • M3 Button - All 5 Material 3 variants (Filled, Outlined, Text, Elevated, Tonal) with full accessibility
  • M3 Navigation Rail - Collapsible Material 3 navigation with responsive behavior

Coming Soon - Dialog, FAB, Cards, Chips, Text Fields, and full Material 3 component suite

Developer Experience:

  • âš¡ Turborepo builds • 📦 PNPM workspaces • 🎯 TypeScript first
  • ♿ WCAG compliant • 🌙 Dark mode ready • 📱 Mobile optimized
  • ✅ Actively maintained • 📚 Well documented • 🚢 Production-tested

Get Started in 60 Seconds

Install:

npm install @banegasn/m3-button @banegasn/m3-navigation-rail

Use:

import '@banegasn/m3-button';

<m3-button variant="filled">Click Me</m3-button>
<m3-button variant="outlined" icon="star">Favorite</m3-button>
<m3-button variant="tonal" loading>Processing...</m3-button>

That's it! No configuration needed - just Material Design 3 web components that work everywhere.

Material 3 Components Coming Soon

Upcoming Material Design 3 web components: Dialog, FAB, Cards, Text Fields, Chips, Top App Bar, Bottom Navigation, Tabs, Snackbars, plus complete Material 3 Expressive theming system.

Looking for Material Design 3 components? Unlike Material UI (still on Material 2), this provides true Material 3 web components for React, Angular, Vue, or vanilla JavaScript. Enterprise-ready with Monorepo structure, tree-shakable builds, and SSR support for Next.js, Nuxt, SvelteKit, and Angular Universal.

🔗 Links

Ready to use Material 3 Expressive components?

Check out the demo or GitHub repository to get started.

#MaterialDesign3 #WebComponents #MaterialYou #MaterialExpressive #WebDevelopment