MD3 Expressive
Material Design 3 Expressive

Material Design 3 Expressive — Built for the Web

39 zero-dependency Web Components ported directly from Android Jetpack Compose 1.4+ source code. Features CAM16 HCT dynamic theming and spring physics.

Get Started Explore Components GitHub
play_circle Live Expressive Showcase
Compose 1:1 Physics
waves Wavy Progress Indicator
65%
progress_activity Loading Morph
smart_button Expressive Buttons & FAB
tune Expressive Slider
65
tune Interactive Experiment Bar:
Dynamic Seed:
Scheme: Expressive Mode: Dark

verified Why MD3E Web?

Core architectural principles of the Material Design 3 Expressive web implementation.

html

1. Zero Dependencies

Shadow DOM v1, Custom Elements v1, and CSS Custom Properties. No build step required, runs natively anywhere.

palette

2. CAM16 Dynamic HCT

Derives 5 tonal palettes with guaranteed WCAG 2.1 AA/AAA contrast ratios from a single seed hex color.

toys

3. Android Compose 1:1 Spring Physics

Organic and natural motion curves powered by a damped harmonic oscillator mathematical model.

integration_instructions

4. Cross-Framework Ready

Seamless form integration and event handling across React 19, Vue 3, Svelte 5, Angular 17+, and Vanilla HTML/JS.

Ready to build with MD3E?

Install the zero-dependency package or read the developer quickstart guide.

terminal npm i @materialwebunofficial/md3e-web
Get Started Guide
info
Open Source & Legal Notice (Apache-2.0 License):
This project is an independent open-source web adaptation and personal learning project. It is not affiliated with, endorsed by, or sponsored by Google LLC. The wavy progress and spring physics algorithms are derived under the Apache-2.0 license from the Android Open Source Project (AOSP) and Material Components for Android source trees.
rocket_launch

Getting Started with MD3E

A production-ready suite of 36+ Material Design 3 Expressive Web Components featuring CAM16 dynamic color theming and organic spring physics. Run natively in any modern browser with zero build step requirements.

download 1. Quick Installation

Choose the integration method that fits your project architecture.

terminal

Option A: Package Manager (Recommended)

Install via npm, pnpm, or bun for React, Vue, Svelte, Next.js, or Vite apps.

terminal Terminal / Shell 
# Install with NPM
npm install @materialwebunofficial/md3e-web

# or with PNPM
pnpm add @materialwebunofficial/md3e-web

# or with Bun
bun add @materialwebunofficial/md3e-web
cloud_download

Option B: Zero-Build CDN

Embed directly into any HTML page with zero bundlers or build steps required.

code HTML Head 
<!-- M3E Design Tokens -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@materialwebunofficial/md3e-web/dist/tokens.min.css">
<link rel="stylesheet" href="src/icons/material-symbols.css">

<!-- M3E Web Components -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@materialwebunofficial/md3e-web/dist/md3-expressive.min.js"></script>

play_arrow 2. 30-Second Quickstart Template

Copy and paste this minimal boilerplate into an index.html file to get immediate results.

html index.html (Complete Template) 
<!DOCTYPE html>
<html lang="en" data-theme="dark" data-theme-scheme="expressive">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MD3E Web App</title>

  <!-- 1. CSS Design Tokens & Material Symbols -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@materialwebunofficial/md3e-web/dist/tokens.min.css">

  <!-- 2. Web Components Suite (All 36 Components) -->
  <script type="module" src="https://cdn.jsdelivr.net/npm/@materialwebunofficial/md3e-web/dist/md3-expressive.min.js"></script>
</head>
<body style="background: var(--md-sys-color-background); color: var(--md-sys-color-on-background); padding: 32px; font-family: Roboto, sans-serif;">
  
  <h1 class="md-headline-medium">Hello MD3 Expressive</h1>
  
  <div style="display: flex; gap: 12px; align-items: center; margin: 20px 0;">
    <md-button variant="filled" icon="favorite" label="Expressive Button"></md-button>
    <md-button variant="tonal" icon="share" label="Tonal Action"></md-button>
  </div>

  <md-progress-indicator type="linear" variant="wavy" value="70"></md-progress-indicator>

</body>
</html>

integration_instructions 3. Framework Integration

Since MD3E uses native W3C Custom Elements, it operates seamlessly with all major UI frameworks.

React 19 / Next.js Component (App Router) 
'use client';
import { useEffect } from 'react';
import '@materialwebunofficial/md3e-web/src/tokens/bundle.css';
import '@materialwebunofficial/md3e-web/src/icons/material-symbols.css';

export default function ActionCard() {
  useEffect(() => {
    // Dynamic import registers custom elements in the browser
    import('@materialwebunofficial/md3e-web');
  }, []);

  return (
    <div style={{ padding: '16px' }}>
      <md-card variant="elevated" interactive>
        <md-button variant="filled" size="m" icon="check" label="Confirm"></md-button>
      </md-card>
    </div>
  );
}
vite.config.js (Vue 3 Custom Element Config) 
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          // Tell Vue compiler to treat md- tags as native Web Components
          isCustomElement: (tag) => tag.startsWith('md-')
        }
      }
    })
  ]
});
App.svelte (Svelte 5 Runes) 
<script>
  import '@materialwebunofficial/md3e-web/src/tokens/bundle.css';
  import '@materialwebunofficial/md3e-web';
  let progress = $state(65);
</script>

<md-slider min="0" max="100" bind:value={progress}></md-slider>
<md-progress-indicator type="linear" variant="wavy" value={progress}></md-progress-indicator>
app.component.ts (Angular 17+ Standalone) 
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@materialwebunofficial/md3e-web';

@Component({
  selector: 'app-root',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `<md-button variant="filled" label="Angular MD3E" icon="bolt"></md-button>`
})
export class AppComponent {}
app.js (Vanilla JavaScript) 
import { applyDynamicTheme } from '@materialwebunofficial/md3e-web';

// Apply CAM16 dynamic theming with single function call
applyDynamicTheme('#6750A4', true, 'expressive');

code 4. Core JavaScript APIs

Programmatically control dynamic theming and spring physics animations.

Theming & Physics API 
import { applyDynamicTheme, SpringPhysics } from '@materialwebunofficial/md3e-web';

// 1. Apply dynamic tonal color palette from any seed hex color
applyDynamicTheme('#00639B', true, 'expressive');

// 2. Generate smooth WAAPI keyframes with damped harmonic oscillator
const keyframes = SpringPhysics.generateKeyframes({
  stiffness: 800,
  dampingRatio: 0.7
});

// 3. Animate any DOM element natively
document.querySelector('#my-element').animate(keyframes, {
  duration: 450,
  fill: 'forwards'
});

palette 5. Key Design Tokens Reference

Core CSS Custom Properties available globally across your application.

CSS Variable (Token) Description Example Usage
--md-sys-color-primary Primary accent brand color Filled Buttons, Selected FABs, Active Indicators
--md-sys-color-surface-container Default surface and card background Cards, Sheets, Dialogs, Content Panes
--md-sys-motion-easing-expressive-spatial Organic expressive motion bezier curve Expanding surfaces, modal entrances, layout shifts
--md-sys-shape-corner-extra-large 28dp expressive corner radius Large containers, cards, bottom sheets
--md-sys-typescale-display-large 57px / 400 weight / 64px line-height (Brand font) Large expressive hero typography (.md-display-large)
--md-sys-typescale-headline-medium-emphasized 28px / 500 weight / 36px line-height (Brand font) Emphasized section headings (.md-headline-medium-emphasized)
--md-sys-typescale-title-medium-emphasized 16px / 700 weight / 24px line-height / 0.15px tracking Emphasized card & list titles (.md-title-medium-emphasized)
--md-sys-typescale-body-large 16px / 400 weight / 24px line-height / 0.5px tracking Standard readable long-form text (.md-body-large)
--md-sys-typescale-label-large-emphasized 14px / 700 weight / 20px line-height / 0.1px tracking High-emphasis interactive CTA labels (.md-label-large-emphasized)

M3 Expressive Typescale System (26 Styles — 13 Baseline + 13 Emphasized)

Ported directly from AndroidX TypeScaleTokens.kt. All styles support both CSS Custom Properties and utility classes (.md-<name> / .md-typescale-<name>).

DISPLAY (BRAND)
Display 36px
Emph (500)
HEADLINE (BRAND)
Headline 24px
Emph (500)
TITLE (PLAIN)
Title 16px/500
Emph 16px/700
BODY & LABEL
Body 14px / 400
Label Emph 14px/700
info
Open Source & Legal Notice: MD3E is an independent open-source web implementation and personal learning project distributed under the Apache-2.0 License. It has no official affiliation with Google LLC. Motion models and mathematical curves are inspired by Android Open Source Project (AOSP) and Material Components for Android. GitHub Repository
dashboard_customize

Components

39 Web Components Catalog

Components are interactive building blocks for assembling a user interface. They are organized into 6 core categories: Action, containment, communication, navigation, selection, and text input.

verified 100% Android Compose Tokens
bolt Zero Dependencies
code Native Web Components

toolbar App bars

Top and bottom app bars provide access to key destinations and screen actions.

Top App Bar (Small 64dp) Prominent page headline with leading navigation icon and action items.
<md-top-app-bar headline="Page Title" variant="small"></md-top-app-bar>
Top App Bar (Medium 112dp) Expanded headline area for rich screen typography and scroll collapse.
<md-top-app-bar headline="Medium Top Bar" variant="medium" subtitle="Subtitle"></md-top-app-bar>
Bottom App Bar (80dp) Anchored bottom surface housing floating primary actions and navigation.
<md-bottom-app-bar></md-bottom-app-bar>

notifications Badges

Dot badges and numeric count badges providing non-intrusive status indicators.

Badges Dot, single-digit, and large count badges with overflow handling.
<md-badge label="4"></md-badge>

smart_button Buttons

Buttons prompt most actions in a UI with 5 expressive sizes and spring morphing.

Buttons Filled, Tonal, Outlined, Elevated, and Text variants for high to low emphasis.
<md-button variant="filled" label="Button" icon="add"></md-button>
5 Expressive Sizes (XS to XL) Official scale from compact 32dp utility buttons up to 136dp hero callouts.
<md-button size="m" variant="filled" label="Button"></md-button>
Floating Action Buttons (FABs) Small (40dp), Medium (80dp), and Large (96dp) primary action buttons.
<md-fab variant="medium" color="primary" icon="add"></md-fab>
Extended FABs Extended floating action buttons with clear text labels and icons.
<md-fab variant="extended" color="primary" icon="add" label="Compose"></md-fab>
FAB Menu Speed-dial action menu with expressive spring pop-in physics.
<md-fab-menu icon="add" color="primary" items='[{"icon":"edit","label":"Doc"}]'></md-fab-menu>
Variants (Medium / 56dp) Standard, Filled, Filled Tonal, and Outlined single-action icon buttons.
<md-icon-button variant="standard" icon="favorite" aria-label="Favorite"></md-icon-button>
Toggle States (Unselected / Selected) Toggle icon buttons that switch between unselected and selected active states on click.
<md-icon-button toggle variant="tonal" icon="bookmark" selected-icon="bookmark_added" aria-label="Bookmark"></md-icon-button>
Sizes (XS, S, M, L, XL) Clean hit areas: XS (32dp), S (40dp), M (56dp), L (96dp), XL (136dp).
<md-icon-button size="m" variant="filled" icon="search" aria-label="Search"></md-icon-button>
Single-Choice Segmented Button Connected button group for mutually exclusive options.
<md-segmented-button items="Day,Week,Month,Year" selected-index="0"></md-segmented-button>
Multi-Select Segmented Button Toggle multiple active formatting styles simultaneously.
<md-segmented-button multi-select items="Bold,Italic,Underline" selected-indices="[0,1,2]"></md-segmented-button>
Expressive Split Button Dual-action component pairing a primary trigger with a dropdown menu.
<md-split-button label="Save" icon="save" items='[{"icon":"cloud_upload","label":"Save to Cloud"},{"icon":"download","label":"Export as JSON"}]'></md-split-button>

crop_square Cards

Cards contain content and actions about a single subject, available in both interactive and non-interactive variants.

Filled Card (Interactive)

Clickable container with tactile spring press and hover response.
Interactive Filled Card Interactive surface container with spring scale (0.98) response.
<md-card interactive variant="filled"><h3 class="md-title-medium">Filled Card</h3></md-card>

Elevated Card (Interactive)

Elevated card lifting to Level 2 shadow with spring motion on hover.
Interactive Elevated Card High-emphasis surface with dynamic elevation physics.
<md-card interactive variant="elevated"><h3 class="md-title-medium">Elevated Card</h3></md-card>

Outlined Card (Interactive)

Crisp 1dp outline variant with interactive click feedback.
Interactive Outlined Card Clean structured border with interactive click action.
<md-card interactive variant="outlined"><h3 class="md-title-medium">Outlined Card</h3></md-card>

Filled Card (Non-Interactive)

Static surface container for grouping purely informational content.
Non-Interactive Filled Card Read-only container surface without hover or click states.
<md-card variant="filled"><h3 class="md-title-medium">Filled Card</h3></md-card>

Elevated Card (Non-Interactive)

Fixed Level 1 shadow elevation for non-clickable content grouping.
Non-Interactive Elevated Card Static resting elevation without hover lift effect.
<md-card variant="elevated"><h3 class="md-title-medium">Elevated Card</h3></md-card>

Outlined Card (Non-Interactive)

Static 1dp outline border matching outline-variant token.
Non-Interactive Outlined Card Crisp non-interactive perimeter for structured layout cards.
<md-card variant="outlined"><h3 class="md-title-medium">Outlined Card</h3></md-card>

label Chips

Assist, Filter, Input, Suggestion, and Action chips with 32dp height and 48dp touch targets.

Filter & Assist Chips Selectable filters and contextual action helpers.
<md-chip variant="filter" label="Top Rated" selected></md-chip>
Input & Elevated Chips Removable token entries and elevated container chips.
<md-chip variant="input" label="Contact" dismissible></md-chip>

calendar_month Date Pickers

100% faithful AndroidX Compose DatePicker implementations.

Date Picker (Docked / Inline) Compact calendar grid attached directly under an outlined date field.
<md-date-picker></md-date-picker>
Date Picker (Modal Dialog) Click to trigger modal calendar dialog with headline and month view.
<md-date-picker headline="Select Date"></md-date-picker>
Date Range Picker Continuous range track selection with start/end anchor pills.
<md-date-picker range headline="Select Range"></md-date-picker>

schedule Time Pickers

100% faithful AndroidX Compose TimePicker with dial, keyboard, and horizontal modes.

Time Picker (256dp Dial) Click to open circular interactive clock dial with selector arm.
<md-time-picker format="12h"></md-time-picker>
Time Picker (Keyboard Input) Direct hour and minute numeric text fields with 24-hour mode.
<md-time-picker format="12h" input-mode="keyboard"></md-time-picker>
Time Picker (Horizontal / Compact) Side-by-side time display and dial for compact and landscape layouts.
<md-time-picker format="24h" orientation="horizontal"></md-time-picker>

open_in_new Dialogs

Modal dialogs with title, supporting text, icon, and action buttons.

Dialogs Click button to open centered modal dialog with scrim and focus trap.
<md-button variant="filled">Dialogs</md-button>

remove Divider

A thin line that groups content in lists and layouts.

Content Section 1

Content Section 2 (Inset Divider)

Content Section 3

Dividers Full-width and inset 1dp dividers matching outline variant token.
<md-divider></md-divider>

list Lists

Continuous vertical indexes of text and images.

Lists Single-line and two-line interactive list items with leading icons.
<md-button variant="filled">Lists</md-button>

progress_activity Progress & Loading

100% faithful AndroidX Compose LoadingIndicator (7 MaterialShapes morph), Linear/Circular Standard & Expressive Wavy indicators.

Linear Standard (Determinate 65%) Linear Standard (Indeterminate) Linear Wavy Expressive (Determinate 75% · 10dp height) Linear Wavy Expressive (Indeterminate)
Linear Progress Indicators Standard 4dp linear and 10dp expressive sinusoidal wavy progress tracks.
<md-progress-indicator type="linear" variant="wavy" value="68"></md-progress-indicator>
Standard 75%
Standard Indet
Wavy 70%
Wavy Indet
Circular Progress Indicators Circular standard and continuous 8-lobed wavy progress animations.
<md-progress-indicator type="circular" variant="wavy" value="70"></md-progress-indicator>
Standalone
Contained
Loading Indicator (Morphing 7 Shapes) Standalone (transparent background) and Contained (circular container) morphing shapes.
<md-loading-indicator variant="contained" size="m" color="primary"></md-loading-indicator>

check_box Selection Controls

Checkboxes, Radio buttons, and Switches with spring motion.

Checkboxes (18×18dp / 2dp radius) Includes standard, checked, indeterminate dash, error, and disabled states.
<md-checkbox label="Subscribe to newsletter" checked></md-checkbox>
Radio Buttons (20×20dp / 10dp dot) Clicking switches active selection across the radio group.
<md-radio-button name="plan" label="Option 1" checked></md-radio-button>
Switches (52×32dp Track / Spring Morph) Handle expands from 16dp to 24dp (selected) to 28dp (pressed) with spring travel.
<md-switch selected show-icons></md-switch>

horizontal_rule Sheets

Bottom sheet and side sheet interactive contextual surfaces.

Choose how you would like to share this item with your team.
Bottom Sheet Modal bottom surface for mobile actions and sharing flows.
<md-bottom-sheet headline="Options"></md-bottom-sheet>

Detailed properties and metadata for the selected item.
Side Sheet Modal and standard side panels for desktop property editors.
<md-side-sheet headline="Filter"></md-side-sheet>

tune Sliders

Expressive sliders with 5 sizes (XS 16dp to XL 48dp), centered track, and 4dp discrete stops.

Continuous Slider (Standard XS - 16dp) 1:1 pointer tracking with zero lag. Tooltip indicates current value.
<md-slider min="0" max="100" value="45"></md-slider>
Discrete Slider with Stops (MD - 32dp) Snaps to 10-unit intervals with 4dp discrete stop dots.
<md-slider min="0" max="100" step="10" value="60" discrete></md-slider>

announcement Snackbar

Snackbars provide brief messages about app processes at the bottom of the screen.

Snackbar Transient feedback bar fixed at the bottom of the viewport.
<md-snackbar message="Item added to wishlist" action-label="Undo"></md-snackbar>

tab Tabs

Tabs organize content across different screens and data views.

Primary Tabs High-emphasis category tabs with animated active indicators.
<md-tabs variant="primary" tabs='[{"label":"Flights"},{"label":"Trips"}]'></md-tabs>
Secondary Tabs Underline tabs for sub-sections within a primary view.
<md-tabs variant="secondary" tabs='[{"label":"Overview"},{"label":"Specs"}]'></md-tabs>

edit Text Fields

Outlined and Filled text fields with floating labels, leading/trailing icons, and supporting text.

Outlined Text Field 1dp outline perimeter with floating label animation.
<md-text-field variant="outlined" label="Email" placeholder="name@example.com"></md-text-field>
Filled Text Field High contrast container fill with bottom indicator line.
<md-text-field variant="filled" label="Username" placeholder="Enter username"></md-text-field>
Error State & Counter Error semantic coloring and dynamic character count tracking.
<md-text-field variant="outlined" label="Password" error error-text="Password is too weak" maxlength="20"></md-text-field>

density_medium Toolbars

Toolbars display frequently used actions relevant to the current page.

Floating Action Toolbar Rich editor floating action bar with standard icons and separators.
<md-toolbar color="surface-container"></md-toolbar>

chat_bubble Tooltips

Tooltips display brief labels or messages anchored to interactive elements.

Plain & Rich Tooltips Hover over buttons to inspect plain and rich tooltips with pointer carets.
<md-tooltip text="Helpful tooltip"><button>Hover</button></md-tooltip>

palette Theme & color

Material 3 Dynamic Color CAM16 / HCT engine and Compose theme composables.

Dynamic HCT Color Customizer

Select official presets, adjust HCT sliders, or pick RGB/Hex values to dynamically recolor the entire UI in real time.

Hue (H) 280°
Chroma (C) / Saturation 48
Tone (T) / Lightness 40
tag
Primary
Primary Cont.
Secondary Cont.
Tertiary Cont.
Surface High
Error Cont.
<md-theme seed="#6750A4" scheme="tonal-spot"></md-theme>