material-you-react
Version:
Material You: Material You (M3) Design system and its components for simple integration with Next.Js or other react-based frameworks
51 lines (28 loc) • 1.97 kB
Markdown
# 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"
/>`