21st.dev

The problem with vibe coding tools like Lovable, Replit, and v0 is that the generated websites always look plain and boring. And when you see a professional website like the iPhone website, you might think that you totally need a designer and a developer to create something like this. But that's actually not true. All you need are some pre-made components and instructions for the AI on how to use them.

Today, I'm going to show you a component library that can access your designs. No matter if you create a website for your own product or for a client, this will immediately make your websites look more professional and valuable, which also means that you can charge more money.

In this video, we will build a website together. We will start with a simple prompt that even your grandma could write, and then we will make it beautiful without writing any code ourselves. We will see how easy it actually is, if we run into any problems or configuration issues, and how good the results look in the end.

My name is Florian Walther and this is the AI Tool Corner where I review the latest AI software to find out which ones can actually improve our lives and businesses.

For this video, I'm going to use Lovable, but this will work with any vibe coding tool, including Replit, v0, and even an IDE like Cursor. But if you want to follow along, I will put the link to Lovable into the video description. And I recommend that you follow along because this is a lot of fun.

Let's create an account here or log into your existing account. On Lovable, you get five credits for free every day, which is enough to send a few messages to the AI agent, have it write some code, and then you have to wait until the next day to get new credits. Or alternatively, you can buy one of the paid plans like I did. But you can also just wait.

By the way, if you can hear kids screaming in the background, this is not coming from my basement. I actually have a kindergarten next door and they are outside right now.

We start with a very simple prompt. Create a landing page for my product Bullshock Test. Use the attached product image for the hero section. Use colors from the image for the page's theme colors. And this is the hero image I have prepared for my imaginary product Bullshock Test.

And I created this image and a few other ones using Nano Banana Pro. As you can see, they are really high quality. And I'm going to attach this one to the AI chat just like this and send this. Then the AI gets to work.

So this is the first version of our website. It's not too bad, right? But also not award-winning. Two things I want to change right away. There is too much space here between the first and the second section. Let's try to fix this with the AI agent. I also created the screenshot here to exactly show the AI where the problem is. This usually helps. I'm going to attach this to the chat as well.

Let's try to fix that. This worked. And next, I want to tell the AI add animations to all elements when they scroll onto the screen because this immediately makes the website look higher quality. And now when I refresh the page, we get some nice animations which immediately makes the website look much higher quality, doesn't it?

But basic prompting only gets us so far. If we want to make this website really beautiful, we need something else. And this is where 21st.dev comes into play. Again, I will put the link to it into the video description. This is free and it's basically a collection of beautiful components that you can use in your app.

Over here, we find different categories for different kinds of components. For example, heroes and calls to action. And they all have an interactive preview, so you can click on them and see how they look and function on a real website. Doesn't this look beautiful? Scroll through this and find one that you really like.

Since we have images on our website, I want something that shows images. This one here is pretty good. It's a kind of slideshow that automatically swaps the image every few seconds. Let's add this to our app.

Up here we can click on copy prompt but actually it's better when we open this first which brings us to the details page of this component. Don't get scared by these installation instructions. This is actually very simple. When we click on copy prompt we can copy the prompt for our specific vibe coding tool. Claude Code, Cursor, Lovable, Replit, v0. In our case that's Lovable but this will even work with other vibe coding tools. It's just optimized for these ones here.

Let's copy the prompt for Lovable. Then we go back to Lovable. We paste it here into the chat. Let's take a look at this. Copy paste this component to the components UI folder. Then it has some code here that contains the component itself. And below we can add additional instructions.

I'm going to write use this component for the hero section of our website. Use the attached images for the slideshow. And then I'm going to attach these three hero images that I have prepared. I attach them to the chat. And now when we send this, the AI will go ahead and install this component and then add it to our page.

And just like that, we have our new hero section with our automatic slideshow that switches between images. And this is how it looks in a new tab. It's still not perfect. I want the image to take up the full height of the screen. Also, let's make the navigation bar transparent so we can see the full image. And maybe align the text on the left side so it doesn't hide the product itself.

But you shouldn't make many changes at once. It's better to go step by step. So the first change I'll make is make the hero section full screen height. There we go.

Next, make the navigation bar translucent so we can see the hero image behind it. There we go. Looks pretty good. And Lovable also gives us suggestions for follow-up messages. For example, add scroll-based navigation bar opacity, which I think is a good idea. Let's add this one as well. There we go. This works pretty good.

And lastly, align the text in the hero section on the left side so that the middle part of the images is not hidden behind it. This is how our website looks now. And just like that, within five minutes, we made it so much better looking and so much more professional.

But we are not done yet. Let's also replace this testimonial section here because it looks a bit boring. On 21st.dev we have a category for testimonials which gives us beautiful testimonial UI components. Let's find one that we like. I like this one here.

And I've also prepared some images for our testimonials. Again, I used Google AI Studio to create them from scratch. So these people don't actually exist. So again, we open this component in a new page to get the Lovable specific prompt. We copy it into Lovable, paste it here, and add additional instructions.

I added after installing the component, replace our current testimonial section with this new component. Use the attached images for the user images. Replace the roles with the people's ages because in our testimonial section, we have these ages here, but in the 21st.dev component, they have roles or actually company names, but the AI will understand what we mean. And I also added the testimonial texts that it should use for each image. Let's send this.

And by the way, all these components are based on shadcn/ui components. If you are not a developer, you don't need to know what shadcn exactly is, but it's basically the small pieces that these components are built out of. shadcn has buttons, input fields, cards, everything, and it has basically taken over the web development world. That's why virtually every vibe coding tool uses shadcn components under the hood. This is just some background information, but if you're not a developer, you don't need to care about these details.

And there are our new testimonials. The height is a bit off. I want them to be taller so the images are not cut off. I wrote make the testimonial cards a bit taller so the images are not cut off. The images are all 9-by-6 so the testimonial cards aspect ratio needs to be close to that. Doesn't have to be exact though. Let's send this.

There we go. Now we have a beautiful testimonial section. And now we can keep going and replace more and more components. This is really like being a kid in a candy shop. It's so much fun. I could do this forever.

Let's add a better footer to our app because the one we have right now is a bit boring. Maybe this one here with the brand name and some social media links. Again, we copy the prompt. Paste it into Lovable and add replace our current footer with this new footer. Add fake links for now.

Maybe we can also do something with this benefits section here which looks a bit boring. There is also a UI components section which gives you smaller components to work with like single buttons or cards. This one looks pretty cool, but I'm not sure if the AI can handle this because the structure of our feature cards is different than what we have here. And we also have this background effect, but let's try it out.

Again, I copy the Lovable prompt and I added use this background plus cards effect for our benefits section. Keep the title, description, and icon in each card. Again, I'm not sure if the AI can handle this. Let's see.

Oh, and by the way, this is our new footer down here. I just one-shotted it. This looks super amazing. And it also got the cards and the background effect, right? I didn't expect this. Look how amazing this looks. The effect is super cool. It's different than what we have here because we have a different structure for our cards. But the AI was able to adapt this component to our use case. And it even used our accent color here for the background effect. This is so cool. And it's so easy and fast to build beautiful websites with these components.

And since 21st.dev is community-driven, they keep adding more and more components. So we will never run out of beautiful designs. So yeah, this is really great work.

Let's take another look at our full website. We have this beautiful hero section with the scroll effect. We have our transparent navigation bar that becomes opaque when we scroll down. We have this super cool effect here with these transparent cards. They're even pulsating. And we could now go ahead and replace more of these sections with 21st.dev components, but as you can see, it only takes a few minutes and it makes your websites so much more beautiful.

So yeah, I highly recommend that you try out 21st.dev because you saw how easy and fast this was and how great our result looked. Again, I will put all the links into the video description below. You can use all of this for free.

And if you want to see more cool vibe coding videos and tutorials, I will put the playlist here on the screen. Check this out. Subscribe to the channel if you haven't yet. And then I hope I see you in the next video. Take care.