# Material You React

<img src="https://github.com/material-components/material-web/raw/main/docs/images/material-web.gif"/>

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

## Material You 

<img src="https://ba72d080.rocketcdn.me/wp-content/uploads/2021/05/Android12.png"/>

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