Skip to content

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

License

Notifications You must be signed in to change notification settings

TheUltraCommunity/material-you-react

Repository files navigation

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" />

About

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

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published