JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
    • 0
  • Score
    100M100P100Q25603F
  • License Apache-2.0

Material You: Material You (M3) Design system and its components for simple integration with Next.Js or other react-based frameworks

Package Exports

  • material-you-react
  • material-you-react/dist/cjs/index.js
  • material-you-react/dist/esm/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (material-you-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Material You React

Material You React is a comprehensive library of React components that features our independent implementation of Google's Material You Design system.

Material You

Material You is Google's latest design system that respects the user's personalization by tinting the user's experience with fresh vibrant prominent colors picked from the user's wallpaper.

Documentation

Get started in the Material You React documentation.

Installation

Run the command in your root project directory on your terminal to add Material You to your project

npm i material-you-react @types/material-you-react

Dependencies

Google Web Fonts

To install the Material Symbols font in your project using the Google Web Fonts CDN, add the following code snippet inside your project's tag:

To use the symbol, you must first add the Material Symbols font. Here are some instructions on how to do so. For instance, via Google Web Fonts:

Material Symbols Rounded

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

Material Symbols Outlined

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

Material Symbols Sharp

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

Roboto

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" />