Build a GLASSMORPHISM React Component - Typescript & Material-UI

From the creator

💡 Learn how to design great software in 7 steps: https://arjan.codes/designguide. In this video, I explain how to create a customizable glassmorphism React component. Glassmorphism is a visual design for glass-like surfaces in user interfaces. Next to showing how to build a glassmorphic element in React, I also show you how to manipulate the style through properties, and how to use the useStyles hook from the Material-UI library to create fully customizable styles. Finally, I add a few nice motion effects to finish the example and give it that sheen that every user desires! A few interesting books to read if you want to learn more about React: - Learning React: Modern Patterns for Developing React Apps, by Alex Banks and Eve Porcello: https://amzn.to/2Ol5eJs - Fullstack React: The Complete Guide to ReactJS and Friends, by Anthony Accomazzo, Nate Murray, and Ari Lerner: https://amzn.to/3qfa1dz You can find the code I worked on in this episode in my GitHub repository: https://github.com/arjancodes/glassmorphism Chapters: 0:00 Intro 1:05 Example explanation 2:08 Creating the basic 3:40 Applying the glassmorphic style 6:28 Customize the card with props 10:39 Using clsx to create conditional styles 13:06 Adding motion: basics 14:02 Adding motion: advanced 17:48 Final thoughts 18:37 Outro

Published 2021-02-12 · Watch on YouTube ↗
Availability and playback restrictions are controlled by the original channel.