WEBVTT 00:00:00.000 --> 00:00:05.680 I'm sure you've heard of the age old saying, do not judge a book by its cover. But unfortunately, 00:00:05.920 --> 00:00:09.920 when it comes to web and mobile apps, we are 100% 00:00:10.080 --> 00:00:18.545 judging the book by its cover. That's why in today's video, I'm gonna be showing you four component libraries that you can use to build sleek, 00:00:18.705 --> 00:00:24.305 beautiful applications that your users will love and will return and will want to use continuously. 00:00:24.465 --> 00:00:33.110 Because remember, they're going to judge the book by the cover, so why not make the cover beautiful. Sit back, relax, let's get into it. First UI library 00:00:33.190 --> 00:00:34.870 is Coconut UI. 00:00:35.030 --> 00:00:58.750 This is a collection of stunning components and I will say this is one of those component libraries that has the unique ones. Right? They're like the general component libraries that have all the components. There are the blocks templates component libraries, and then there's the unique component component libraries. And this is one of those. For example, you have the slide text button, which I really like. Right? I slide and it says click to see more. And then you have this liquid glass 00:00:58.830 --> 00:01:29.160 music player. Right? You can drop this in using their NPX command or BunX command or you can open this in v zero or straight up just copy the code. They also have the Apple activity card. Right? The activity rings. If you're on the Apple watch or use the health app, you'll know this component. And this is a pretty hard one to build. Right? So you can build on top of this component, change it up. Again, NPX command or you can copy the code. Uh, Coconut UI also has beautiful bento grids, a nice bento grid on your homepage. 00:01:29.240 --> 00:01:41.160 It just does something, man. So you can see these nice little animations over here. I can see the code, although it'd be nice if there was, um, like highlighting, uh, syntax highlighting, which I'm sure you can add yourself using AI. 00:01:41.675 --> 00:01:44.075 And then we have card flip, animates 00:01:44.075 --> 00:02:06.090 beautifully, card looks sleek. Oh, this is a good one. Uh, the stack of cards. You click and the the card split. You click and then it goes back in the order it was. And then you have this component. Say you're building something to do with currency transfers. Right? You just saw that animation right there. Super sleek and clean. Coconut UI also has some AI specific components like an input selector, 00:02:06.250 --> 00:02:06.970 uh, search. 00:02:07.715 --> 00:02:13.395 You have here, like, let's say you have some tool calling happening. You wanna have some loading state in the chat. You can use this. 00:02:13.955 --> 00:02:26.530 Um, you can use this as well. And then they have an AI voice component. Um, eleven Labs also has something similar like this, so you can pick and choose. And you have a couple text animations here, one with scroll, typing, matrix, 00:02:26.930 --> 00:02:29.730 dynamic, the glitch effect, shimmer, 00:02:30.050 --> 00:02:43.305 slice text, swoosh. And then last but not least, you have this profile drop down from all the components that I like. There's plenty more here. Check it out yourself. The link is in the description, Coconut UI. Now second up, we have style UI. 00:02:43.625 --> 00:02:55.420 It says create beautiful UI with our blocks and templates, but this one is coming soon. Someone very handsome that you may have seen before, I'll put his picture right here, is working on this with his team. Expect blocks 00:02:55.420 --> 00:03:08.755 and templates. They're going to be super clean and super fresh, and I can't wait for this person again to get them into your hands. But to be on the wait list to make sure you're alerted when these drop, make sure to go to styleui.dev 00:03:08.755 --> 00:03:16.355 and enter the wait list. Make sure to follow me on x as well. That's where I'll be announcing it. I'm sure you're going to love these ones. 00:03:17.315 --> 00:03:24.970 Next up, we have Cult UI. I don't really feel comfortable with the name, but there are a couple components that I found fresh here. The first one being 00:03:25.050 --> 00:03:32.730 the family drawer. Now if you're not familiar with family, it's this crypto wallet app. But in my opinion, it's the most beautifully designed, 00:03:32.970 --> 00:03:34.330 beautifully architected 00:03:34.330 --> 00:03:36.865 app ever. The animations 00:03:36.865 --> 00:03:43.265 to the haptic feedback to how the components look, it's an absolutely dream of an app. 00:03:43.585 --> 00:03:48.225 And one of the beautiful things they designed are these drawers that just smoothly animate, 00:03:48.770 --> 00:04:00.290 and Cult UI has brought these into the web. I particularly like the open custom drawer one. That's a really good one. Again, you have the family button as well. When you click that, this nicely animates. 00:04:00.705 --> 00:04:12.225 I really like this. You can definitely use this in your web apps. Another cool one that I liked was the expandable screen. Say you have a waitlist page, you can click get early access, and it's like a model that takes over the entire page. 00:04:12.545 --> 00:04:15.960 User can fill it up, then close it, nicely animates 00:04:15.960 --> 00:05:07.375 back. Now another one I really like is the browser window. This is a customizable browser window mock up component with support for Chrome, Safari, and generic style. So you can customize how this looks. You can make this look like Safari, Chrome. You could specify the URL. You can choose to show the address bar. We can make this super small or extra large if you want. You can have the sidebar be to the left, to the right, and there are these presets as well that you can select, but a really nice and sleek component, definitely something you should add on your web apps. Obviously, if it makes sense. This three d carousel of images is pretty cool. And again, just to set this up, all you do is copy the command and if you're building on chat scene, which I'm sure you are, you can have this set up easily. And then they have a hover video player where you see the component, I can hover over this and now it becomes a video player. This is pretty sleek. I actually like this. I don't like the default video player with HTML, 00:05:07.375 --> 00:05:35.035 uh, the video tag, so this is a pretty sleek component. And then you have the shift card component where if you hover over, you see the image shift to the right, and then this pop up slide beautifully. Again, there are plenty of components in Cult UI. I'll have the link down in the description below. Check it out for yourself. And then we have motion primitives. UI kit to make beautiful animated interfaces faster. So there's an emphasis on beautiful motion and animation 00:05:35.115 --> 00:05:36.795 with motion primitives. 00:05:36.875 --> 00:05:52.680 For example, let's say the animated number. If you want to animate some GitHub stars that you wanna show off on your page or some dollar dollar bills, this is a great component for you to have. You have then the sliding number. This is just beautiful stuff. Again, all the code is right there for you. 00:05:53.485 --> 00:05:59.405 We also have the dynamic toolbar where if I click on this, you notice how it nicely shifts. 00:05:59.565 --> 00:06:31.265 Let's click on expandable. If I click on this, you see it expands from bottom to top. This, again, you can have a nice little toolbar or like even a dock using this component. What we're going to do is we're going to click on components on the top right, and then we're going to click on dock. I really like the dock component. You can style this with whatever icons you want, but that nice animation as you hover over it is beautiful. You have this glow effect right here. You can have it on buttons. But also what I like is let watch this. When I click submit, the component glows. Right? So this is something you could do with some sort of submission. 00:06:31.585 --> 00:06:46.280 And then you have this, like you can use this as, a before and after, or you can use this as a, like, a slider to show, like, if you use my tool, this is what it looks like. If you don't, this is what it looks like. Really sleek and simple. You can also have it on hover. So this is where I clicked 00:06:46.440 --> 00:07:02.885 on the, like, the line, the separator, and I'm dragging it. This one, I just hover, and then I when I go left and right, it follows. This one sorta has a spring motion where, like, notice how it's bouncy, like, it catches up. And then you can also have a custom slider with this. You can have a progress 00:07:03.045 --> 00:07:17.130 bar. Right? That's on the nav bar. That's on the top. So that'll show people how much progress they've made in reading an article or going through a page. They also have this magnetic button where, like, if I hover over it, it you notice how it sort of follows my cursor. 00:07:17.450 --> 00:07:22.145 Um, there's also where you can see the text is more so floating 00:07:22.385 --> 00:07:30.225 in the button. Like, these little things are just so immaculate and beautiful, and they just enhance the user experience of your applications. 00:07:30.225 --> 00:08:05.690 Oh, this is a morphing dialogue. So notice how, like, let's say this is like a notification that pops up. I can click on it and and that dialogue just animates beautifully. You can have that with images as well. You can have this with cards as well. And then you have a morphing pop over. Let's say you are, like, editing some settings, a profile setting, whatever it is, you can have it just pop up there, click submit, and then it closes back. Here, it's telling you you can customize the transitions however you want. You can have a text area pop up. There are just a lot of these primitives that you can find with motion primitives that I find super useful when developing web apps. And then I noticed 00:08:05.850 --> 00:08:07.610 when I clicked on IA, 00:08:07.690 --> 00:08:08.810 promptkit.com 00:08:08.810 --> 00:08:10.170 popped up, and this is for 00:08:10.925 --> 00:08:22.045 AI applications. So if you're building an AI app, they have building blocks for you to use. Like, for example, their chain of thought component where you can show how the model is processing the information. 00:08:22.285 --> 00:08:35.980 You have a chat container here. You have code blocks. Again, I'll link all of this stuff in the description down below. All this stuff is copy paste for you to use. So please, you have no excuse on having ugly looking web applications. 00:08:35.980 --> 00:08:44.725 You literally have all these component libraries linked in the description down below. And, I want to let you know I will be dropping my very own style ui.dev 00:08:44.725 --> 00:08:54.975 very soon. Make sure to sign up for the wait list link in the descriptions down below. Thank you so much for watching this video. Make sure to like, comment, subscribe, hit that notification bell, and I'll see you in the next one. Peace.