So, so far in the series, we haven't really needed much in the way of design. So far, the only thing we've really needed is a text input. And to do that, I had to write already too much tailwind and too many HTML elements. And this is why we created Flux. It's LiveWear's official UI kit. And it's just a way to have all the things that you need, little widgets and do odads and form inputs and modals and drop downs, all of that stuff you can just have and you

and form inputs and modals and drop downs, all of that stuff you can just have and you don't have to build yourself and reinvent the wheel. And we're going to use it in this series because I can't use LiveWear without Flux because it just makes you go so fast and everything looks good. So we're going to use it and I figure let's just do a quick video where we install it. So we go to Flux Docs, installation, composer, require LiveWear/Flux. We pop it in here and now it's going to install Flux with composer.

So we go to Flux Docs, installation, composer, require LiveWear/Flux. We pop it in here and now it's going to install Flux with composer. Okay, that's done. If you're using Flux Pro, you can activate your Pro license, otherwise we can use the free stuff. There's a lot there. Then we need to include the Flux assets. So Flux Appearance and Flux Scripts. And this goes in the layout files.

So Flux Appearance and Flux Scripts. And this goes in the layout files. If we go to Layouts App, right where we already have our LiveWear stuff, we just say, well, I copied it. So Flux Appearance and this one will say Flux Scripts. Okay, then you have the assets there. And the last part is you need Flux to dovetail into your current tailwind build . So we're going to need this stuff.

. So we're going to need this stuff. So let's go to our tailwind file. So this is in Resources CSS app.css. And we will replace this with our Fluxified version. And then there's some bonus stuff. Like you can use the Inter font family if you want. That's going to give you some, I don't know, like you use whatever font you want, but we designed Flux to be used with the Inter font.

want, but we designed Flux to be used with the Inter font. So that's just what we're going to use. Okay, so Flux is pretty much done and we won't really notice it on this screen at all because we're not using any of it. But let's actually just throw in an entire Flux layout. So I grabbed this from layout sidebar and you just pick whatever kind of layout you want, sidebar, header, and then you can copy the whole layout file.

you want, sidebar, header, and then you can copy the whole layout file. And so we paste that into our layout and now we have a full collapsible, nice layout or sidebar layout. Let's convert the component real quick to take a look at what that looks like. So here I have these manually created HTML elements with tailwind and error messages and things for these inputs. This becomes a lot easier with Flux, you just say Flux input and then things

things for these inputs. This becomes a lot easier with Flux, you just say Flux input and then things that you normally would like wire model and then we'll say label is title, okay, refresh and then it looks pretty much the same. Although you'll notice that Flux is taking care of a few other things that I didn't even bother to take care of and let's do the same thing for the text area. So we duplicate this and we go text area, wire model and this is going to be

bother to take care of and let's do the same thing for the text area. So we duplicate this and we go text area, wire model and this is going to be content and title is going to turn into content and then the button will say flux, button save is what it's called and then we'll say wire, no, we don't need to do wire anything because it's in a form. So we just say type submit and then here we'll make this variant primary, it's going to make

So we just say type submit and then here we'll make this variant primary, it's going to make it kind of bold because it's like a submit button. All right, so now we have flux here for everything here. All right, this is just going to make the rest of the series way easier. There's nothing live wire specific to flux or live wire for specific. All of the content still applies to anything. Just see when you see like flux button, think of it like your own blade component, like X button.

component, like X button. It's just a button element under the hood and it's forwarding attributes and you can type wire model or wire click or whatever you want. Let's keep going.