Material 3 Expressive for the web

Material Design.
More expressive.

Color that feels personal, shapes that respond, and motion that feels natural, in an independent collection of web components.

Try it

Downloading 0%

Press and select

Volume 65

Make it yours

Pick a seed color. Every color role on this page is generated from it.

What makes it expressive

Color with character

Start with one seed color. Material Color Utilities turn it into a complete scheme for surfaces, controls, light and dark themes, and contrast levels.

Shapes that respond

Buttons, chips, and toggles change shape as they are pressed or selected. The 35 shapes of the Material shape library are ready to use.

Motion with meaning

Springs drive movement and color. Spatial springs may overshoot a little, and effects springs settle without a bounce.

Start building

Install the package, or add two lines to any HTML page.

npm i @materialwebunofficial/md3e-web

Install

Package manager

For apps built with a bundler such as Vite or webpack.

npm install @materialwebunofficial/md3e-web
pnpm add @materialwebunofficial/md3e-web
bun add @materialwebunofficial/md3e-web

CDN

For a single HTML page, with no build step.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@materialwebunofficial/md3e-web/dist/tokens.min.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/@materialwebunofficial/md3e-web/dist/md3-expressive.esm.js"></script>

Your first page

Save this as index.html and open it in a browser.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@materialwebunofficial/md3e-web/dist/tokens.min.css">
  <script type="module" src="https://cdn.jsdelivr.net/npm/@materialwebunofficial/md3e-web/dist/md3-expressive.esm.js"></script>
</head>
<body style="background: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface)">
  <h1 class="md-headline-medium">Hello, Material</h1>
  <md-button variant="filled" icon="favorite" label="Like"></md-button>
  <md-progress-indicator type="linear" variant="wavy" value="70"></md-progress-indicator>
</body>
</html>

Frameworks

The components are custom elements, so frameworks render them like any other HTML element.

'use client';
import { useEffect } from 'react';
import '@materialwebunofficial/md3e-web/tokens.css';

export default function Confirm() {
  useEffect(() => { import('@materialwebunofficial/md3e-web'); }, []);
  return <md-button variant="filled" icon="check" label="Confirm"></md-button>;
}

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue({
    template: { compilerOptions: { isCustomElement: tag => tag.startsWith('md-') } }
  })]
});

<script>
  import '@materialwebunofficial/md3e-web/tokens.css';
  import '@materialwebunofficial/md3e-web';
  let volume = $state(65);
</script>

<md-slider value={volume} oninput={e => volume = e.detail.value}></md-slider>

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="Save"></md-button>`
})
export class AppComponent {}

import '@materialwebunofficial/md3e-web';

const button = document.createElement('md-button');
button.setAttribute('label', 'Save');
button.addEventListener('click', () => console.log('saved'));
document.body.append(button);

Theming

A theme element generates the color scheme from a seed color. The expressive theme also selects the expressive motion scheme.

<md-expressive-theme global primary-seed="#00639B" color-mode="auto" palette-variant="tonal-spot">
  <!-- Your app -->
</md-expressive-theme>

Or apply a scheme from JavaScript:

import { applyDynamicTheme } from '@materialwebunofficial/md3e-web';

// Tonal spot, the default dynamic color variant, for the dark theme.
applyDynamicTheme('#00639B', true);

// Any other Material variant, such as vibrant or monochrome.
applyDynamicTheme('#00639B', true, 'vibrant');

Design tokens

Components read the system tokens below. Use them in your own styles to stay consistent.

Token	Value	Used for
`--md-sys-color-primary`	Dynamic color role	Filled buttons, active states
`--md-sys-color-surface-container`	Dynamic color role	Menus, navigation surfaces
`--md-sys-shape-corner-extra-large`	28px	Dialogs, sheets, large containers
`--md-sys-shape-corner-full`	Fully rounded	Buttons, chips, indicators
`--md-sys-typescale-display-large`	57/64, weight 400	Large, short headlines
`--md-sys-typescale-headline-medium-emphasized`	28/36, weight 500	Emphasized headings
`--md-sys-typescale-title-medium-emphasized`	16/24, weight 700	Emphasized titles
`--md-sys-typescale-body-large`	16/24, weight 400	Long-form text
`--md-sys-motion-easing-expressive-spatial`	Spring curve	Movement that may overshoot

Actions

Buttons, FABs, and their variations help people take action and make choices.

Buttons

Buttons prompt most actions in a UI. They come in five sizes, and their shape responds to press and selection.

Button groups

Button groups organize buttons and add interactions between them. Standard groups react to presses; connected groups replace segmented buttons for selection.

FABs

A floating action button (FAB) holds the primary action on a screen.

Extended FABs

Extended FABs show a label next to the icon. Collapse them to the icon when space is tight.

Icon buttons

Icon buttons perform compact actions. Toggle icon buttons change shape and fill when selected.

Segmented buttons

Segmented buttons help people select options, switch views, or sort elements. Expressive leaves them unchanged and recommends connected button groups for new designs.

Split button

A split button pairs a primary action with a menu of related actions.

Communication

Badges, progress, snackbars, and tooltips keep people informed.

Badges

Badges show notifications, counts, or status information on navigation items and icons.

Loading indicator

Loading indicators show progress for short waits, cycling through a sequence of morphing shapes.

Progress indicators

Progress indicators show the status of a process. A wave adds expression to long waits.

Snackbar

Snackbars show short updates about app processes at the bottom of the screen.

Tooltips

Tooltips show brief labels or messages.

Containment

Cards, sheets, dialogs, lists, and dividers hold and organize content.

Bottom sheets

Bottom sheets show secondary content anchored to the bottom of the screen.

Cards

Cards display content and actions about a single subject.

Carousel

Carousels show a collection of items that can be scrolled on and off the screen.

Dialogs

Dialogs provide important prompts in a user flow.

Divider

Dividers are thin lines that group content in lists or other containers.

Expansion panel

Expansion panels show a summary and reveal details on demand.

Web extension. Material 3 has no component with this name; this one is composed from Material components and follows their specs.

Lists

Lists are continuous, vertical indexes of text and images.

Side sheets

Side sheets show secondary content anchored to the side of the screen.

App bars

Top app bars show the title and actions for the current screen. Bottom app bars hold actions at the bottom of the screen.

Navigation drawer

Navigation drawers list destinations and can be organized into sections.

Navigation rail

Navigation rails let people switch between destinations on medium and expanded screens.

Paginator

A paginator moves through pages of data and sets how many items each page shows.

Web extension. Material 3 has no component with this name; this one is composed from Material components and follows their specs.

Search

Search lets people enter a query and get relevant information. The bar can stand alone or sit in an app bar.

Stepper

A stepper divides a task into numbered steps.

Web extension. Material 3 has no component with this name; this one is composed from Material components and follows their specs.

Tabs

Tabs organize content across different screens and views.

Toolbars

Toolbars show frequently used actions relevant to the current page.

Selection

Checkboxes, chips, pickers, menus, radio buttons, sliders, and switches let people choose.

Checkbox

Checkboxes let people select one or more items from a list, or turn an item on or off.

Chips

Chips help people enter information, make selections, filter content, or trigger actions.

Date pickers

Date pickers let people select a date, or a range of dates.

Menus

Menus display a list of choices on a temporary surface.

Radio button

Radio buttons let people select one option from a set.

Sliders

Sliders let people make selections from a range of values.

Switch

Switches toggle the selection of an item on or off.

Time pickers

Time pickers help people select and set a specific time.

Text inputs

Text fields and the controls built on them let people enter and select text.

Autocomplete

An editable text field that suggests matching options as people type.

Web extension. Material 3 has no component with this name; this one is composed from Material components and follows their specs.

Select

A read-only text field that opens a menu of options.

Web extension. Material 3 has no component with this name; this one is composed from Material components and follows their specs.

Text fields

Text fields let people enter text into a UI.

Styles

Color and shape are the foundations every component builds on.

Color

Dynamic color creates a full scheme of color roles from one seed color.

Shape

Expressive shapes from the Material shape library add emphasis and personality.

Material Design.More expressive.

Try it

Make it yours

What makes it expressive

Color with character

Shapes that respond

Motion with meaning

Start building

Install

Package manager

CDN

Your first page

Frameworks

Theming

Design tokens

Glacier hike

Weekly summary

Book club

Storage almost full

Delivery update

New sign-in

Material Design.
More expressive.