FREE: v0.dev Vercel Best UI Components Generator! (React & NextJS)🤖 Beats Claude Sonnet & ChatGPT!

What's going on guys Josh pook here and in today's video we're going to be looking at v.d this is potentially the better alternative to using clae uh artifacts to generate Co code components this is potentially better than cursor this is potentially one of the best on the market right now for generating UI components that is modern using Shad Cen library and uh we're going to show you exactly how you can use this for free and build out components let's dive right

Into it [Music] all right guys so for those of you who aren't new to this channel I've done many different videos especially recently but even over the course of you know a while going over different alternatives to vzero yesterday I covered llama coder I covered rapid pages I covered open UI there's a bunch and these are all open source tools and they're free and you can use your API keys or whatever the case may be there's different types of ones but

I actually haven't covered vzero and as of at least from what I've seen with vzer over the last year just with you know any AI model such as Claude open AI it's improved drastically right and I know it was kind of hot I mean it's still very hot but a lot of people were talking about it maybe a while ago and um but now it's actually a lot better at least from what I have seen so this is going to allow

You to generate UI ask questions debug code and much more and what's really cool what I like it better than Claud Sona in some ways is that it will actually have the code the artifact is a lot better meaning that even if it's using like Imports of cant um components or C cant libraries or functions it's actually going to render and show whereas with Claude Sonet um c times when you're trying to render that code in the artifact it's basically going

To say it doesn't have such and such Library or import so it can't show that code in the artifact it will just show the code which kind of takes a point of way of the artifact so let's go ahead and use vzer now um there is a paid plan that you can upgrade to but as of now I haven't I probably will to be quite to be quite honest it's 20 bucks a month uh you get higher messaging limits but honestly

I haven't even reached a messaging rate limit yet so this is kind of like uh if you haven't been using this kind of like a diamond in a in a rough right now and yeah so let's go ahead and just test some stuff out and as you'll get to see as I start generating something right here let me just say generate a multi-step onboarding form generate a function okay quick easy let's just do that all right and as it's generating you're

Going to start seeing that it the quality of it is way better than a lot of the other open source ones all right so as you can see here it is uh it has the artifact right here we have the preview the code and it has a lot more options of so if you don't know vzer is made by versel if you don't know versel I'm not going to give a whole rundown on versell but uh yeah huge huge company in

Terms of like deploying your apps and whatnot so if you are using versel to deploy an app uh into production then this kind of fits right in I believe you can install it very simple it's very easily integrated into versel platform so that's really cool um as you can see here we got the form right here it looks really nice just at a box let just go ahead and look even I I believe even if I just put Josh here for

The email okay so some I've had it where it will um kind of have that validation uh where you do have to put the um the at and the Doom so I have had that before I believe but as you can see here we got a full form like imagine how long this would have took you to custom code this um probably would have took took you at least like maybe 20 30 minutes um maybe 10 minutes depending on you know

How quickly you can do it we're doing it fully from scratch but as you can see we got five steps and then a summary right before we submit we can submit and nothing happens but let's look at the code here so we're importing US state from react importing um some button components some input components some label components all from sad CM uh radio group uh item and then the select items etc etc so all these different form components um yeah I'm

Not going to go through the whole entire code right here but you can see pretty much how it's written out here and then you could go install this will add block to Pro wow this is pretty crazy so wow you can literally run npx Shad CN at I think this is actually new wow that's really crazy like think about how easy that is just to add that into a project anyways um you could Fork this I'm not going to Fork it

Of course but if you did it would Fork it where you could go ahead and change some stuff around if you wanted to do like a version two of what whatnot um but uh yeah you could go ahead and publish this so confirm and publish publishing this block makes it accessible through a publicly available URL allows other users to Fork it you can unpublish a block at any time your chat will remain public so if you haven't noticed by now um

And you can share here private public I mean this is absolutely Game Changer okay guys now let's go ahead and say hm okay well I want to iterate this so um that's good make it more modern um make it look like a professional um Fortune by 500 companies form with very modern and professional designs okay so I'm just like just like I wouldn't necessarily use this type of prompt I'm just like doing it for the sake of this video but I

Would spend some time and iterate it and improve upon it in here now let's go ahead and send it we can see VZ is thinking and it's very quickly very quick I don't know exactly what model they're using um in the on the back end side of things whether it's open AI clae custom uh model whatever the case may be um so as you can see it's being iterated upon we can see this if you didn't know guys this is obviously

A react component and um yeah just all in all I mean you I mean this is what we kind of expect from verel but the UI of v0 is very very nice very very sleek and uh wow okay guys so I really didn't do much of a like a crazy prompt and it already looks pretty cool wow okay so we got to look at a little bit nicer now we have a little slider here step one of we got a little

Slider here step one of five we can look at the code here okay wow so it's even importing a motion and animate presence from frame or motion um and Lucid react icons too so yeah we got the icons here we can go ahead Josh like you could get really um Advanced with this stuff okay nice like icons here your roll like this literally took like five couple minutes not even um and to do something like this by hand would have took

Definitely at least 15 20 30 minutes right so and of course you could continuously iterate this and improve upon it you could even throw it into Claude you could do a lot of stuff with this guys so I hope this helps I hope this helps for those of you working on projects um yeah this is something you definitely don't want to uh yeah you definitely want to utilize it and just let me know what your guys thoughts are in the comments

Down below regarding stuff like this I mean it's getting easier and easier uh for for to build things right to build MVPs or prototype things whatever the case may be um you can iterate a lot quicker um yeah the different I guess abstraction levels or layers is getting yeah crazy with what's happening with AI and it's only going to get crazier this is the dumbest AI is ever going to be we got Cloud Sonic we got v0 it's pretty insane right

Now but I'm like for me I'm just thinking like imagine when AI can either like we find a new model uh that works for it or whether we just have longer contacts or a different way that they approach things things like if it's able to have like all the imagine having like all the different docks of all the different tool Stacks that you're using trained on and then like you give it like a a product um requirements dock of what your

App's going to be and it just builds the whole thing and to end so that's kind of the route we're going and that's still at the same time it's just a start like that's that still it's going to continuously improve so pretty crazy stuff to think about um so yeah let me know what your thoughts are about that if you have any questions about this or anything regarding or if you have any ideas of different videos or tools you want me

To cover let me know in the comments down below also too guys if you haven't already checked out our free community stri community.com uh link for that will be in the description down below our free Facebook group free Discord Channel if you like this type of content guys and you're not and you're new to the channel um yeah and you got some value here definitely appreciate hitting that subscribe button hit that like button we upload videos every single day on AI

Automation business growth marketing sales uh AI agents whatever the case may be I'm going to continuously keep putting out more content increasing the quality um so yeah uh other than that guys I will see you in tomorrow's video keep hustling keep grinding and of course guys accelerate your stride take care