Blade UI Kit This next package is by my buddy, Trees Wins, the GitHub hero of Laravel repositories. The package is called Blade UI Kit and it helps you out with a lot of useful components. Here we are, Blade UI Kit, a set of renderless components to utilize in your Blade views. Built for the task, they're completely open source, a component for everyone. So this sounds already amazing, right?

a component for everyone. So this sounds already amazing, right? And so we can see here, here are 27 components, lots of downloads and contributors, so this looks already good. But let's take a look at an example. Do we have one here? I think we need to get started to see this. Yeah, introduction. Here we can see an example. So this is a common check which you have inside your forms to make sure if there are any alerts, any notifications from the backend that you want to show,

to make sure if there are any alerts, any notifications from the backend that you want to show, like this status here. And this is normally how you would do this. But yeah, here now with Blade UI Kit, we have a new XAlert component, which we can use. And as you can see, there's much less to type, which I think we're all a big fan of. And then here on the left, you can see here all the different components that we can use.

And then here on the left, you can see here all the different components that we can use. All right, but how do we want to use them? I have already prepared here a simple little form on our application where we can create a Post with a title and content. And let's give it a try. My new post. This is my new post. It's very creative here. Category published. Save it. Here we go. We have a little notification that everything was working as expected.

Here we go. We have a little notification that everything was working as expected. All right, perfect. So let's take a look at the code now together. This is my view file with this form, which we just have seen. And yeah, here's everything already in here, plain HTML. We're not using any components here yet, but we want to change this. But before, of course, we have to install this package. So installation. First, we need to make sure that we clear our config. And then we're going to install the package.

First, we need to make sure that we clear our config. And then we're going to install the package. Done. And now, second, let's install the package. Here we go. All right, so let's take a look at our form here. What are things that we want to replace with a component? So I'm thinking of something like this alert example, which we have already seen. This is the perfect example here, which we can write in one line, if I remember correctly.

which we have already seen. This is the perfect example here, which we can write in one line, if I remember correctly. So this would be cool. And then also for our forms, we have here some inputs, labels, text area. So these are the things where I hope that we can replace them. Let's take a look. Let's start at alerts. That's an example that we have already seen. So this is what's being done in the backend to create the flash message, and which we can then check in the frontend, which we're going to do like this.

and which we can then check in the frontend, which we're going to do like this. All right, let's see what this does. So let's take a look. alert, I think we also called it alert. So let's see. We're still using Tailwind here, so this looks good. So this means back inside here. Let's refresh. Let's try again. My new post. My new post. This is my post.

My new post. My new post. This is my post. And it works exactly like before. All right, amazing. So that's the first thing that we changed. And as you can see, this is way less text than before, which is why I think those components are very powerful, especially when building out forms. What else do we got? Let's check here. We have a section for forms. And there is also one just for the creation of the form.

We have a section for forms. And there is also one just for the creation of the form. So normally, this is what it looks like. You have a form, and then you have some hidden inputs here, for example, for a method and for the level token. And yeah, we can do this with this XForm component by Blade UI Kit as well. So this means here we are providing this beginning of the component. Let's take out here our action. Let's bring this in here.

Let's take out here our action. Let's bring this in here. And I think then let's maybe also copy this here because it looks like we needed that. Or we added this for a specific reason. And then at the end here, of course, we need to close our form. Take a look. Everything still working. Seems like we have a little extra character here. Oh, it's this one. All right, but yeah, no issues. That's good.

Oh, it's this one. All right, but yeah, no issues. That's good. All right, what else do we have? We have labels. So let's see what this does. This is how we define a label with the XLabel component. And this is how we do it the normal way. So as you can see, by providing here for with the firstName, this will already create a firstName like this. So again, we can save some characters here, which I always like.

this will already create a first name like this. So again, we can save some characters here, which I always like. So where do we have our first label? Here for the title. Let's bring in the component. Going to call this title now. We are not going to close it. We're getting rid of the old one because we need our CSS classes. And here we just close now this new component. All right, let's give this a look. All right, seems this is working, which is good.

All right, let's give this a look. All right, seems this is working, which is good. Let's move on. Here we have another one. This one now is called content. Get rid of this. And let's close it. And one more here for the category. Let's call this category. Let's get rid of the old one.

Let's call this category. Let's get rid of the old one. And we're going to close this without the need to provide the text because this is already done by defining the for method. I think we're done here. Let's take a look. All the labels are still here. So it seems like everything is working, which is great. All right, what else can we do? So what about inputs? Let's check here. We have a normal input here,

So what about inputs? Let's check here. We have a normal input here, which we can use like this, which is providing the name. And then we will also get by default text. And it already gives an idea which is then used for the label. So again, about half of the text than before, which is great. So let's take a look. Where do we have our first input? Here we have it. What is it called? This is for our title. And we don't need this anymore.

What is it called? This is for our title. And we don't need this anymore. The autocomplete we can keep, the placeholder we can keep. And then we close our component. Let's check if this is working still. Okay, looks good. We still got our title here. All right, next one. Now we got a textarea. I think I also saw one here. Yeah, textarea. So let's check this one out. We also provide just the name. To copy this, this will add the name, the ID and define already three rows.

So let's check this one out. We also provide just the name. To copy this, this will add the name, the ID and define already three rows. We can define more if we want to as well. So this also looks good. So this whole line we don't need anymore. We still need our class, our classes. And then at the end, we're going to close our component. Here we go. Let's check it again. Yeah, it still seems to be working and three rows is fine as well. Okay, is there anything else? Let's see.

Yeah, it still seems to be working and three rows is fine as well. Okay, is there anything else? Let's see. I think this is interesting, errors. So normally, if you have backend validation, you get errors back in the syntax with the key and the message. And it seems we can also do this right here. It tells me that by providing this component, we get this HTML. But I'm pretty sure that this also checks if there is an error because we don't want to show this text every time. So I think this could also be pretty useful.

because we don't want to show this text every time. So I think this could also be pretty useful and we haven't set this up yet for our application here. So let's give it a try. Let's start with the title. And I want to provide this after our label. So error for title and text. Let's see if this works right out of the box. Let's try to save this. And as you can see, we have now an error message. So this is pretty cool.

And as you can see, we have now an error message. So this is pretty cool. I'm going to provide this now for the other fields as well. So for content, let's provide it here again after the label. I think it's a good place. This is now for the content. And now if we try this again, we should see two messages and we do. Okay, this is really nice to use. So I hope you can already see how useful this package is to use. And there is much that we can replace inside our given HTML form.

So I hope you can already see how useful this package is to use. And there is much that we can replace inside our given HTML form. And there, of course, are much more components. Also some more tricky ones like there is a countdown, which we can use to show there are some dates which are easier to show on your application. There are, of course, some more inputs, checkbox, color picker, I think is also interesting. Let's see. Do we see an image of that? No, we don't. But it is also interesting old values.

Let's see. Do we see an image of that? No, we don't. But it is also interesting old values. So with all the components for the inputs that we used, we also remain the old values. So this means if we refresh, if you submit the form, you will keep the old values if it was not sent. And also some social meta components, which I think is really nice. And then also editors and stuff for layout. Mapbox, I think it's also a great addition where you can show some maps. I think it would be great if we would see some images here as well,

Mapbox, I think it's also a great addition where you can show some maps. I think it would be great if we would see some images here as well, what it looks by default. But yeah, there is a lot you can do. And I really hope that you see the benefits of using those components where you just have to write way less than before. I'm very happy with the result. Let's give it just one more try just to make sure that it still works. LayerCast is awesome. It is true.

Layer casts is awesome. It is true. And it seems it's not working. So very good that we checked this. So let's go back here. Okay, it seems like I forgot to change here the name of the text area. Oh, this was close one. Christoph needs to be careful. Yes, it is true. And now it should work and it does. Okay, glad that I didn't miss that.

And now it should work and it does. Okay, glad that I didn't miss that. But yeah, it's a good idea that we checked again at the end of this video. Let's break down what we just learned. Blade UI Kit brings a lot of cool components to your application that you can use right off the box. They're easy to integrate, but you can also customize them and they help you to write less code. Thank you, treeswins.

Thank you, treeswins.