I'm sure that at least one time you have used a Google service such as Gmail Google Maps or Google Plus yeah maybe not that one if yes then you have already experienced with material design whether you know it or not Material design is a design system developed by Google and includes guidelines for typography shapes Shadows colors spacing icons up to complete components for everything you usually need in a website or web application the react library for this is called mui or material UI [Applause] foreign [Applause] it's really popular with over 2 500 contributors and 83 000 stars on GitHub and the main contributor from the mui team apparently never sleeps that's how you know it's good overall it's really great if you need a complete solution to bootstrap your react project and focus on the business logic without having to reinvent the wheel for everything we have already enough wheels on front end so now that you know what material UI is about I'm going to show you everything that you need to get started within the next 10 minutes so let's dive into it first open your react project and run the following command this will install mui and emotion which is a library to style components and is used under the hood once it's finished installing you can start using it when creating a website one of the first things you usually do is create some sort of rapper div that centers all the content and creates some margins on the sides instead of figuring out the perfect wrapper CSS and material UI you can simply add the container component when importing make sure to choose material not system I can't tell you how often I got this wrong when I started using mui now let's put in some text and check out where the text appears it's right here as you can see the container is a handy out of the box component that you can use to create the basic structure of the page let's add a background to The Container so we can see its size better to do that we can just use the SX prop that is available on every mui component and here we can give it a background color of let's say tomato and let's set the height to 100 visual height don't worry about the SX prop for now we'll come back to it later for now let's check out the container again now that we can see the size of the container component clearly let's try to resize the window as you can see it's responsive by default how cool is that now let's also change the text from just raw text to A typography component this one should be used as the default for text it has a default font and default size is built in that are based on material designs guidelines by default it's a paragraph element but if you want it to be a let's say H1 element then all you need to do is use the variant prop like this the next commonly used component is a box by default it's literally just an empty div but you can use the SX prop to apply Styles now you might ask if that's the only point of using the Box component why would you choose it over the regular diff is the SX prop that useful let's take a closer look DSX prop is kind of like a supercharged version of the style attribute that you can use in jsx if you like writing styles inline because for example you are working with reusable components or you want to build something quickly then the SX prop is perfect and can be a good alternative for for example Tailwind you can use really handy shorthands such as P for padding M for margin py for padding top and bottom or PX for padding left and right you get the idea and the often used background color is abbreviated to BG color as you saw before this alone already saves a lot of time also mui has built-in spacing of 8 pixel units that you can use with the SX prop which is good to create create consistent spacing throughout your website you can use it by providing just a number as a value without writing pixel let's set the padding to 1. see just like that we created a spacing of 8 pixels if we set it to 2 we get 16 but personally what I find the most useful feature of the SX prop is being able to apply hover styling and any other styling that is usually not possible with a default style attribute in jsx let's say we have a button and want to change its color on Hover to dark blue there would be no way to do that with a normal style attribute but with the SX prop we can just write it like this and it works of course the same goes for pseudo elements and so on no matter what you build you will want to make it responsive and apply different styles depending on the screen size with the SX prop you can easily do that instead of directly providing the value you can give it an object with values for each breakpoint just like that and on top of this this comes with good performance because unlike the style attribute in jsx that is expensive mui converts the values provided in the SX prop to normal CSS class under the hood using emotion now that we have all the basics let's build something but before we start let's create a theme as you saw mui has a lot of default values but of course you can customize all of them by creating your own theme let's do that first go into your root file where all your JavaScript code starts there will be likely something like the index.js file here let's import the theme Provider from mui material make sure to choose the right one again now wrap your code with it next we need to provide a theme object let's create one with create theme Here we can now provide values for typography colors spacing breakpoints and more and by doing that we override the default theme let's keep it simple and just change a few header Styles and let's also change the primary and secondary color now we're ready to use the theme alright let's get started and create a service page with a few cards first let's add a container for our page now let's add the page title using a typography component and set a variant to H1 notice how it now uses the values that we set in the theme next let's give it a top and bottom margin Center it and change the color to the primary color don't forget to use the main property let's also add a second header using the h2 tag now let's create a few cards we don't want to write the styles for each single card so let's create an array of services and map it after we have the array let's now use the map method and create a card for each service we could use the Box component here but there is a nice alternative for these type of cards called paper it has an elevation prop that you can set to a value between 0 and 24 which changes the drop shadow and is based on material design guidelines let's set it to three let's now put in the service name using the typography component and set the variant to H3 that we prepared and the theme now let's put in some text ideally this would be part of the array but for the sake of this video I'm just going to use lorem ipsum so let's see how it looks okay let's change a couple of things first off let's put all of this in a box and use flexbox and set Flex direction to row okay this looks a little bit better now some more spacing between the Cards and the header and let's also add some margin inside the cards and let's also add some margin between the text and the card title looks way better now doesn't it a good card usually also has a CTA like a button so let's add one of course mui comes with an out of the box button component by default the button looks like this but you can also change its appearance to outline or contained let's use contained let's also move it down a little bit by the way did you notice that it automatically uses our primary theme color cool right but we can also change it to our secondary color with the color prop color of the text is automatically set to White to create good contrast if the button color is brighter then it will automatically choose black for the text but if you don't like that you can of course customize that in the theme anyway our cards start looking good but that's only for this screen size as you can see it's not a responsive yet remember how we set different stylings for each breakpoint at the beginning of the video let's apply that now first of all let's change the flex direction to be column on mobile let's replace row with an object and start from Mobile on XS which is the smallest size it should be column the next breakpoint is small which is 600 pixel yeah that's a little bit too narrow maybe let's use the next breakpoint medium which is 900 pixel this looks way better now [Music] let's give the cards a fixed width of 320 pixel but because we want to have them 100 on mobile let's do that by using the shorthand and just put in a one I think this looks really good now of course there are tons of more complex components that you can use out of the box and a lot of customization options in mui check out the documentation for that it's really comprehensive and well structured and contains a lot of examples it also supports typescript and all examples are available in typescript as well anyway that's it for this video I hope you have now a good understanding of material UI and you can start your own project have fun and see you in the next