material-design-3-shape

Material Design 3 expressive shapes use a token system defining semantic radii and a catalog of 35 shapes. These shapes morph to convey state and hierarchy, establishing cohesive aesthetics and usability across UI components.

Implement shape morphing by applying the M3 shape token system to transition a component, such as a card, between different radii scales like medium and extra-large. This provides smooth visual feedback and enhances state communication.

Material Design 3 containment rules provide guidelines for containment levels, responsive adjustments, and smooth morphing transitions. Applying these rules to UI surfaces ensures proper visual hierarchy and accessible interactions across different screen sizes.

Yes, you can use Material Design 3 expressive shapes in design-to-code handoffs. Applying the M3 shape token system to design systems and component libraries maintains brand-aligned, accessible UIs with consistent radii and morphing behaviors.

No specific dependencies are required to use Material Design 3 shape tokens. You can apply the semantic radii scale, expressive shapes library, and morphing transitions directly to your design systems and component libraries without external tools.