Skip to content
m3exp-web
System Light Dark

Material 3 Expressive for the web

Springs, shape morphing, emphasized type and the new expressive components, as design tokens, CSS classes, custom elements and React components. Value for value, they follow Jetpack Compose Material3 1.5.0-beta01. 

npm install @kyralabs/m3exp-web @kyralabs/m3e-tokens
Get started Read the source Open the playground

Theme this site

A seed color and a scheme variant generate every color role with Material Color Utilities. Turn on JavaScript to try it here.

What is Material 3 Expressive?

Material 3 Expressive is Google's 2025 update to Material Design 3. It keeps Material 3's color roles, type scale and components and adds motion, shape and emphasis that make interfaces easier to scan and more engaging to use, along with a set of new and updated components. m3exp-web brings it to the web, matched to the Compose implementation.

  • Motion that feels physical

    Expressive motion is built on springs. Spatial springs move position, size and shape and may overshoot; effects springs fade color and opacity without bouncing. Every component here runs the stiffness and damping Compose uses, interruptibly.

  • Shapes that morph

    The 35 Material shapes, from Cookie to Soft Burst, are rounded polygons that morph into each other. The loading indicator, press states and selection all animate between shapes, with the graphics-shapes math ported line for line.

  • Emphasis in type

    An emphasized style pairs with each of the 15 type styles to highlight headlines, actions and selected states, set in Google Sans Flex, the variable typeface M3 Expressive uses.

  • New components

    Button groups, split buttons, the FAB menu, the loading indicator, wavy progress, floating and docked toolbars, flexible app bars, the short navigation bar and the wide navigation rail join the updated Material 3 set.

Four layers, one DOM

Use the layer that fits your stack. The CSS classes, the custom elements and the React components render the same markup, so they mix on one page and share one theme.

  • Tokens

    @kyralabs/m3e-tokens

    Color, type, shape, motion and elevation as CSS custom properties and JS objects, generated from the Compose token files. Seed themes with createTheme or the m3e-theme CLI.

  • CSS

    @kyralabs/m3e-css

    Every component as framework-free classes. No JavaScript: buttons, cards, lists, chips, text fields and app bars render from markup alone.

  • Custom elements

    @kyralabs/m3e-elements

    Zero-dependency elements for the behavior CSS cannot do: menus, sheets, pickers, morphing shapes and springs. One small entry per element.

  • React

    @kyralabs/m3e-react

    React components on React Aria for behavior and accessibility and Motion for springs, rendering the same DOM as the elements and classes.

The umbrella package @kyralabs/m3exp-web re-exports all four.

Built from the source

  • Tokens are generated from the pinned androidx Compose Material3 token files, with a parity table from every Kotlin token to the CSS variable it becomes.
  • Spring, shape, carousel and picker math is ported from Kotlin and checked against reference output from the original sources, run on the JVM in CI.
  • Every component is screenshot-tested in Chromium, Firefox and WebKit, light and dark, and checked with axe for accessibility.
  • Size budgets keep pages light: one custom element entry stays within 8 kB, min and brotli.