WEBVTT

00:00:00.000 --> 00:00:08.000
You know the saying don't judge a book by its cover? A very beautiful saying, but that does not apply to both web and mobile apps. People definitely

00:00:08.000 --> 00:00:16.865
judge a book by its cover. I will definitely judge a site by its cover, and that's why in today's video, I'm gonna be sharing with you some fire component

00:00:16.865 --> 00:00:47.415
and template libraries that I've sourced completely for free for you. Now some of you might be new to the channel and you're not familiar. I have shared a lot of banger UI components with my audience. I'm talking about this video, this video, and this video. And today, ladies and gents, I've done it again. All of these are free. All of these are fire, and all of these are easy to use in your site. Thanks to AI. Sit back, relax. Let's get into it. First things first, we have liquid metal. Now this is just one simple thing.

00:00:47.735 --> 00:00:49.255
It's this beautiful

00:00:49.495 --> 00:00:50.535
border

00:00:50.855 --> 00:00:51.655
floating

00:00:52.055 --> 00:01:08.380
metal. Like, it just feels so premium. It feels so rich. Like, I click this and I expect the pro plan to be $500 a month. In fact, if it's anything lower than $500 a month, I actually think it's a scam. Use this with caution and wisdom.

00:01:08.460 --> 00:01:13.835
This looks fire. By the way, all the links are in the description down below. Liquid metal justice.

00:01:13.835 --> 00:01:32.110
Again, I don't even know how to describe it. Oh, it says here it's an animated liquid metal border component. Liquid metal border component. Ladies and gents, there you have it. Completely for free for you to use. Number two, this one is actually a gift from my team to you, a gift from me to you, and these are two free templates.

00:01:32.110 --> 00:01:37.790
We have both Notia and Axis. Let's start with Axis first. Axis is your b to b SaaS

00:01:38.035 --> 00:02:03.710
for businesses. If I refresh, you're gonna see the animation nicely hover in. You're going to see the cards. You're gonna see the logos, the numbers, the people talking about you, the beautiful pricing card. This is for your b to b SaaS dreams completely for free. Light mode included as well. All you have to do is just copy this installation link, give it to your AI agent, and it's gonna take care of it for you. The second one is Notia. Now Notia

00:02:03.710 --> 00:02:17.435
originally was actually purple before purple got ruined by AI. I like the dark mode better if I'm gonna be honest. But purple, everybody thinks of purple as AI now, so we added different colors. We have forest green and sunny orange.

00:02:17.515 --> 00:02:31.570
And, again, this is for your consumer app dreams. You see things animating nicely, the numbers coming in nicely. These are two beautiful templates completely for free, a gift from me to you. Again, the link is in the description style ui.dev.

00:02:31.570 --> 00:02:43.695
Now the third component library I wanna share with you is Skipper UI, and Skipper UI is really amazing. You know what else is amazing? The sponsor of today's video. Do you know what an NVIDIA engineer and me have in common? No. I don't make $500,000,

00:02:43.695 --> 00:02:49.615
and no. They're not handsome. But what we have in common is that every NVIDIA engineer uses CodeRabbit,

00:02:49.615 --> 00:03:18.305
which is the sponsor of today's video. Jensen Huang himself said, we are using CodeRabbit all over Nvidia. And there's a reason for that because CodeRabbit is one of the best AI code review agents to exist. Now most of you are already familiar with the review it gives you every time you create a PR when you have CodeRabbit set up. Today, what I wanna share with you is a new workflow that I've been using, and it's their actual CLI. So I have a feature I've been working on on a super secret project, and all I'm gonna do in the feature branch is type Codebabbit.

00:03:18.640 --> 00:03:21.360
And then what I'm going to do is I'm going to hit return.

00:03:21.600 --> 00:04:28.470
And what's going to happen is before I even make the PR, the Codebabbit review agent is going to review my code. Before you were used to getting your code reviewed at PR level, now we're even doing it at the CLI. We're not even getting to GitHub and we're going to get a review. Okay. We see that the review was complete, and there are three potential issues. Now I can click the drop down here, and let's look at this particular problem. So I get a breakdown of the review. Now there's two things I can do. I'm going to click on see, and essentially what I've done is I've copied the prompt that I can pass to my agent to fix this issue. So let's say I'm using Cloud Code. I can click paste. And if I hit enter just for you to see, this is a prompt to help me fix the issue. So instead of getting to GitHub to get code review, I can get code review here on the CLI, and that's all thanks to Codebabbit. So make sure to click the link in the description down below and check it out and make sure to use their CLI. It's awesome. Now let's get back to the video. Now Skipper UI has both free and paid components. I'm gonna show you the free components, but if you got some money on, definitely invest in the paid components. They're pretty fire. Now I'm gonna share with you some of my favorite. The first one is this image

00:04:28.905 --> 00:04:48.100
hover card pushing gliding thing. I really like it. They have a horizontal and a vertical one. I low key kinda like the vertical one, especially if you're doing something artsy fartsy. Definitely take a look at this component. Another one is the different skull animations. This is like the ain't this like the Starbucks?

00:04:48.100 --> 00:05:13.560
No. Not Starbucks. Sorry. Star Wars end credits animation, so you can use that component as well. You also have, like, cards stacking. Again, this just chef's kiss, and all of the code is here for you. Again, you just copy. You give it to your AI agent. It takes care of it for you. Know, back then, we used to write the code. Now we just tell the AI agent to just install. Right? So it's pretty simple stuff. Again, you have these nice card swipes. I really like how

00:05:14.120 --> 00:05:16.600
Skipper handles all the cards.

00:05:16.760 --> 00:05:21.240
Really nicely animated. My favorite one though, and this is one I'm definitely gonna be using,

00:05:21.400 --> 00:05:30.225
is the video player. So the video itself is playing in this little square thing. I hover over and then you see the play button, and then when I click it expands.

00:05:31.025 --> 00:05:34.545
Hopefully, that's not copyrighted music, but very clean,

00:05:34.705 --> 00:06:06.325
very beautiful. We love Skipper UI. Link is in the description. And then we have I believe this is by someone named Ali mom. Again, I apologize if I butcher your name, but couple of banger components here. First and foremost, let's talk about the shaders. You know, shaders are cool nowadays. You add a little shader in your hero section. All of these are free for you to use. You just click on code. Again, copy paste. Give it to your agent. Your agent will take care of it. Help you set up some bento grids. That's available for you as well. I did not look at device. This

00:06:06.645 --> 00:06:07.285
is fire.

00:06:08.090 --> 00:07:12.860
This is fire. So if you wanted to have an iPhone or an iPad or whatever on your page, you can easily do that. You want some patterns on your page, you can easily do that. These are basically, you know, your logo reels, like, you know, you can have your logo nicely animate. Make sure these are companies actually using your product. You got a nice typewriter effect. Right? Like, you can add this in your marketing pages. Looks pretty cool. And if you have some AI stuff on your app and you wanna add, like, glow, you know how, like, Apple intelligence, like, when you click on the thing and the Apple intelligence things pops up and it's glowing, that's basically the same thing here. But, anyway, that is Alimam. Again, the links in our description. There are more components here. Again, you have this gauge component feels very iPhone like, very clean, very nicely animated. So all that stuff, again, the links are in the description. And then you have watermelon UI. I don't know. Calling you watermelon felt wrong for a second. But my favorite one out of all the components they have, again, I wanna, for the sake of time, share with you my favorite one, Is this, like this basically feels like an Apple component. You can probably use this in some sort of onboarding flow. It's very nicely animated. Like, the click is very springy.

00:07:12.940 --> 00:07:16.460
And, again, all the code is here for your AI agent to ingest

00:07:16.725 --> 00:07:20.005
and use. There's also this, like, card swiper,

00:07:20.005 --> 00:07:24.405
so, like, you could, like, just nicely animates, very nice spring animation.

00:07:24.565 --> 00:07:35.980
Almost feels like you're using an iPhone. So highly recommend you check out watermelon UI. And then we have cult UI. Again, questionable name, but fire components. You got a couple of these colorful

00:07:36.140 --> 00:07:37.340
hero sections.

00:07:37.340 --> 00:07:48.060
One of the ones that I was actually pretty rocking with oh, it's this one right here, the family button. Like, you can see I click that nicely animates. Like, again, this might not be for every use case, but definitely

00:07:48.245 --> 00:08:04.750
you could be creative with your apps. You know, let's not build the same thing. Let's not all generate the same slop. Let's add some sauce, some feng shui to our apps. Yes. Everyone can ship nowadays, but ladies and gents, I am telling you, it is so easy to stand out. Just a little bit of quality, just a little bit of time investment,

00:08:04.910 --> 00:08:47.495
and your Apple stand out like no other. And finally, something for you to check out very different is this light board. Again, I wouldn't know where I would use it, but it's pretty different and creative. So make sure again to check out CultUI. They have pro components. If you got a little bit of money on, check it out. Worth the investment, but all the free stuff will be linked down below. And then you have these dot matrix loader. So this is basically if you got a site that has a lot of data that needs to be loaded in, let's make the loading fun. Let's let's make loading creative. Let's make loading great again. And you can use these different loading animations. All you have to do is click them and all the code is there. You can use the CLI. Again, give it to your AI agent. We don't write code anymore. Times have changed. Link in the description for those. And then you have

00:08:47.815 --> 00:08:49.495
componentry.fun.

00:08:49.655 --> 00:08:55.350
These are some pretty unique ones. Like, for example, this keyboard is fire. Right? You could see it's very tactile,

00:08:55.590 --> 00:09:19.625
and you can also download key press sound. So, like, every time you click, you can hear the sound. I actually did this for, um, one of my work projects ship, which is, like, our basically a place for Convex customers or people who just like Convex, use Convex to vote on the different things that they want shipped. Right? And, like, if I log in, I'll show you just quickly. You're gonna hear the click sound. Okay? I'm gonna increase the volume.

00:09:21.500 --> 00:09:39.235
It just feels nice. You know what I'm saying? Oh, another cool feature I added. And, this is about being creative. We have a spin the wheel where you get convex coins credits where you can basically vote on features. You need to place these coins to boost to basically support a feature. I know I'm not explaining it properly, but just looking to spin the wheel.

00:09:40.675 --> 00:09:41.955
Here's how I'm bet.

00:09:42.435 --> 00:09:45.075
And when I win Here comes the money.

00:09:45.235 --> 00:09:47.395
Here we go. Money talks.

00:09:47.475 --> 00:09:59.850
Here comes the money. By the way, I didn't include it originally, but the way I got the balloons to pop up is Balloon JS. Just search it on Google. It's literally just installing that, and you get to have these cool balloon animations,

00:09:59.850 --> 00:10:38.555
or you can get to have these text, which is pretty awesome. I'll make sure this is linked in the description down below. But going back to our component library, you have the keyboard, you have this flight status tracker. Again, very clean, very Apple like, very free, which is awesome. You have the GitHub, uh, tracker. Again, you can use this for a multitude of reasons, not just GitHub, a great way to actually keep your users engaged. And there's a plethora of other fire things. If you wanna be all matrix y and cool, this is available for you as well. But ladies and gents, that is pretty much it. I shared with you not one, not two, not four, not five, but nine different component libraries and templates,

00:10:38.635 --> 00:11:03.905
all free for you to make your applications fire. Now how do you go about using these? Let me actually share with you the method. Before, you would use one of these components, and you would sort of have to handwrite the code for the other components to match this. But what you can do now and, actually, maybe we're just gonna you know what? We're gonna pop up Excalidra. I was actually gonna close out for the video, but I just wanna explain to you the method. What you're going to do is you're going to download,

00:11:04.385 --> 00:11:15.185
uh, let's say this is a component. Right? You're gonna download this into your code base, and then what you're going to do is you're going to tell the AI agent, hey. Listen. Create a design system

00:11:15.640 --> 00:11:17.080
design system

00:11:17.160 --> 00:11:42.835
based on this component. Right? So what you're going to do is and this is what makes AI cool now when it comes to design is before when we downloaded a component, you would have to make sure that the rest of your site matches that component by hand. Now you could tell the AI, extract the design system from this component and make the rest of my app site look the exact same. So now you have it's much easier to design

00:11:43.155 --> 00:12:28.610
really good looking apps if you have a good source of truth, meaning if you have a good foundation. If AI is your foundation, it becomes a problem. But if you use AI to build on that foundation, again, I'm talking about design, I think it works out great. And I've done this a couple of times where I've given it some inspo, a particular component, and it builds, uh, a design system using that component, and it's pretty good at sticking to it. Right? So let's say you wanted the glassy feel, the liquid metal feel. You download this component, and then you tell it, alright. For everything else, I want this around. Now don't make everything, you know, have the liquid metal thing. It should be unique and maybe your call to action buttons. But what I'm saying is there's no excuse to not have a beautiful sight. I hope you enjoyed this video. Make sure to like, comment, subscribe. Hit the notification bell. Hope to see you in the next one. Peace.