So now, as I mentioned, do not forget to also import that as part of the app if you wanna see it with a better font, with the supposed font, anyways. Choosing a React component library, next section right here. So why are we choosing a React component library? Right? Well, you may think that this is, that you prefer always building your own components while using something else, it's gonna add a lot of size to my bundle. I prefer to keep things simple. That's fine. But the thing is, when you choose a React component library, you're actually, I mean, you're getting a lot of things for free, right? You're getting things like high quality components. If you look at our component right now on a storybook, this doesn't have any single interaction. Like you hover, I just see the pointer, but nothing else. I'm clicking on it. Nothing happens, right? I mean, it's fine this button, but it's not really responsive. So this is usually where you start, right? But when you have like a component library, you're gonna start reusing things from zero and there are already high quality components that you can customize as you want, right? And make it custom to your own component system with your own color scheme, with your own typography. So you're building that, right? You're creating your own brand, right? The thing is you also have a team working for you, you know, like you have, like, for example, we're going to be using material UI and I'm gonna go there in a second, but the material UI team is a fantastic team. These guys are amazing. When I was part of Google, we try to also do the same. We try to create a react version of our component library. We ended up saying pointing to material UI because they were doing a better job than us. I shouldn't say that, but I have to say that too because the community around material UI is so large and the development team there, they are constantly making updates, making sure that everything is bug free and you get accessibility, you get extensibility, you get a lot of things for free. So it's like, if you have your own one-person company, by using a component library, this is like having a team that is working for you, which is amazing. Right? Anyways, we're gonna choose material UI, as I mentioned. The reason being, if you click on this link, you can also find the communities that from this article, this is recent from this year, and the comparison with other libraries, there is Ant, there is Chakra, Bootstrap, those are like all great. But I think material UI by far has the highest community. Right, and when you have a very high community, you usually think of also having the right documentation. If you get stuck, you also know that this is being a maintain by a team of people, day by day. Right? And this says origin, Google, well, I would say it's back up by Google, but it's not made from Googlers. All right, that's FYI. All right, anyways, material UI. I don't know if you know about them UI. It's pretty cool. If you go to the website, you have the docs. You can search by components. For example, if we look at the button, you can get here, find the buttons. You can get the documentation of different states right here, all in React. This component by default, I already used material design. And you have right here so many different components, like check boxes, radios, selects. There is a lot of things going on that you get for free, all right? So this is pretty exciting. And anyways, we're gonna jump to installing the library, all right? So here we have a link to install the library and you also have the snippet, all right? So you can just copy and paste the snippet on your new tab on your terminal and we're gonna be installing Material UI right now. Right, all right, it's gonna take a little bit. I don't think it takes a lot. Look at that, how fast that was. All right, we install MUI and we're gonna do some cleanup, all right? So first things first, so our button component looks as I mentioned, looks terrible, doesn't have any interactions. Look at that, this is so bad. Anyways, we're gonna go to our button.jsx and I'm gonna import the button. You have the snippet. I know you don't have the snippet but it's pretty simple guys. So what you need to do is, you can do just import button from at MUI Material slash button, all right? As we do with well, we have to, we have to also know that if one important button but our component there is bottom there is a conflict here. So instead of important button we're gonna say MUI button instead, right? And hopefully that's okay, fantastic. So this MUI button I can just replace this button that I have here instead and as soon as I have it, it is running into an error. Why is that? We need to restart Storybook probably because we install a new dependency, right? So we're gonna restart Storybook and hopefully we're gonna see this new bottom right away. And here you go, here is the bottom, right? You may notice that this button already has some interaction. However, if you look at the button documentation by the way, if you got stuck into how to import the button you can also get it from the docs, all right? It's right there. And as you can tell, there are different variants and you also have access to the API on the right panel at the very bottom where you can see, like, if you click on button you have access to all the different props and values. All right, but just to make things easier we're gonna start by making some changes to our button. It is this variant here, all right? That as you can tell, there is text, contain, outline and this is the representation of these three. So if I go here and then change variant to contain, right? Then our button looks way better, right? However, this props right here, right? We need to inject them so they support material UI. All right? So, it's gonna be pretty simple. So first things first, we're gonna add a new property called, we can add it at the very end. Variant and that variant we're gonna add it here, injected to this prop right there and you have not seen anything, right? Why? Because we need to, in.stories, we need to inject that as well, all right? So this primary, what about if we call it contain instead, because contain is the variant. So I'm gonna say that variant contains. And if I do it, this is gonna complain, but as soon as I click on it, I'll see it, all right? And instead of secondary, we can call it outline, which is the second version of the variant and we're gonna add a new prop called variant outline, all right? Same we will do with text. So in large, we can keep large. Large is I think is useful, and it's small. So let's create a new one, a new state, and we can call it text and variant text, right? Done, so we now switch between the three. The text is not showing because, why? Oh, because I forgot to add, I forgot to bind it, okay? Oh, it should be called, sorry, it should be called text, and the arcs. Right now, it's right there, but what is going on with this border right there? I think there are some conflicts happening with our classes, so we're gonna remove the class name right there, and we're gonna remove as well the style. We don't need that. Let's remove that, and now our bot one has three different versions. Outline, contain, and we have it right there. Which is great, it's looking good. Anyways, as you can tell now, our bottom is way more interactive. We have hover, we see the shadow, we can click, everything looks way, way better. If you look at the docs, these descriptions right here, we got the new variant prop, but it is not description. In order to add it, you can just add these on prop types, and you can call it instead variant. And this is a string. And here you can add some documentation. In this case, this is the variant state of our button, whatever. Not great comment, but if I add it there and then I refresh, hopefully, I see, oh yeah, here you go. This is a variant state of our button, and it's a type of string, and I have the control right there. One thing that we would like to do now, our accessibility is passing, which is awesome. And one thing we need to do here is this contain is a string, but it will be very nice if we could do something like this, right? On our controls. But instead we can also add selectors, well, select component instead of having radio buttons for that. So how do we do it? So under our types in our button stories, we can use background color, we can just remove it. We don't need it. And then we will be adding variant, which is the name of our prop. And then we'll do type and this is a select and options, which is the second key. And this is an array of strings and we can set contain, we can set outline and we can set text. As soon as I do it, this component, it was a text field. Now is a selector, right? Now I can just switch between the three different variants on the controls. How cool is that? So cool. Anyways, we have our library right there with our button looking great. The different versions of our button.