Build Next js 14 Apps with this AI Tool in Minutes - v0.dev - Tailwind css Shadcn UI

hi guys welcome back to another video on nextjs mainly in this video I will be talking about this awesome AI tool called v.d which is built by versal as you guys know that the versal uh is the one who built the nextjs for us and nextjs is one of the top notch Technologies nowadays to build front-end web applications along with nextjs the Tailwind CSS is the top choice for the uiux developers who want to design their application and when it comes to the Tailwind CSS this Library shade CN UI is one of the top choices for the developer to use along with the Tailwind CSS so using this v0 tool we can use prompts or we can directly add images to build an awesome UI it can be the top bar nav bar sidebar or any kind of design on your web app using this awesome vzer tool and it has this free version with the speed low quality fast generation and it has this premium version I'll be showing you by creating an awesome UI for the payment plan cards using this v0 by veral AI tool let me know if you anybody of you uses premium and how good is it is so let's go and I'm going to be creating a new nextjs project configuring it with the Shar CN UI and I'll be showing you how we can uh use v0 tool to create awesome UI before that let me quickly test that if I upload an image uh how good it creates the UI for that and I'm going to select this one and I can add the description as well but I'm going to go with submit as it is so let's see what it creates whether it analyzes this image properly obviously when Wei will be on the Premium plan it will create a proper UI all right guys so I think it has created uh pretty much good UI according to the image which I uploaded and it has added these icons as well um and we can modify this as well based upon our requirement so how quick is that uh if I go to the code and this is the code it has written if we manually try to write this code it will take us uh a lot of minutes to write all these tailin CSS classes to build this awesome UI so how good is that now without uploading an image I'm going to show you how we can add different prompts keep on adding prompts communicate with VZ to create an awesome UI like this so I've created this empty next js14 project so that I can copy the code from the v0 over here in multiple components to be the part of my code so first of all I'm going to be configuring shared CN UI in my project quickly and uh I'm just open up this ui. sh cn.com docs installation and next so here I'm just going to paste this command and it's going to ask me few questions uh in the latest version it doesn't ask that much question so let me show you what it shows so I'm going to go with the default slate and CSS variables yes and that's it it automatically going to detect all of the different files and it's not going to uh ask these much questions in the latest variant all right so next as you already know that uh we have this uh commands and for every component that we want to use uh we have to run this command and at the end it is showing the button uh we can replace the button with accordion alert alert dialog or anything and it's going to create uh its component uh in my project so let me quickly do that just to show you so I'm just going to copy this button and it's going to add the button component so I'm going to add this command over here in the terminal and it's going to install that button in my components uh UI and then the button TSX and the good thing about Shar CN UI that many people are using it it one of the most demanding technology and one of the most used technology because it gives you the code which you can modify and it does not uh store all the components within the node modules folder in fact it creates the component with the code uh you can add multiple variants you can change the properties and it's using the Tailwind CSS classes as you can see over here all right so we have configured shade CN UI all right so let's go back to our browser and uh I'm going to go to v.d again and here I'm going to create the card so let's start off by writing the details create a payment plan card for my SS application hit enter and uh it's going to give me three options from those three options I can select one and start chatting with Z and uh modify it by writing the prompts so you can see that it has generated this first one uh this is the second one and this is the third one so I don't want form I think this is good uh and I'm going to go with the second one okay so by clicking on the second one I can start modifying it um I can bring everything at the center of the card so I can write bring um every content of the card at Center hit enter so you will see that it is going to bring everything at the center of the card and after that I can start giving it prompts to change the colors and change the background colors of the button as well so um uh add price in dollars below growth text uh make uh price text large hit enter and uh you will see that it's going to show us the price below the growth it has gone below the build uh I I I think I need to be more specific in writing prompts so um change replace billing frequency with monthly text so let's see if it changes that or not and uh I'm sure that it's going to do that so you can see that it has changed build monthly and then it's going to show the price and uh replace text growth with an icon having circular background um having BG color of light blue [Music] so let's see what happens uh I'm quickly going to add uh multiple prompts and show you the final results but it has brought this icon to the left I'm going to add the prompt to add it uh to the center and uh I'm going to change the background color of these icons as well and uh I'm going to remove this one this thing and I'm going to add some gradient to this button as well so let's quickly do that and I'm going to show you the final result all right so this is what I have achieved after giving it almost 29 prompts you can see there is a gradient background with a light gray color there is a top blue bar and uh this is what I have modified giving it uh some text colors and giving it background color to the buttons and if I click on this code over here you will see that we can get the HTML off it or we can get the code for the react comp component all right so what I'm going to do is I'm just going to copy this one the react one and I'm going to go and create a new component and I'm going to create payment plan. TSX all right so I'm going to paste this one over here and if I go up uh you'll see that it is giving me an error that the UI card is missing since we are using Shar CN UI so I'm going to go to the shade CN and this is the card component so what I'm going to do is I'm just going to copy this command and I'm going to install this card and that will be added within the UI folder automatically because this is how the shade CN UI works so here you can see that the error is gone and uh it is showing us this particular props uh for now we can add any to it all right so we have added this component over here this is the card and uh what I'm going to do is I'm going to go to this page and I'm going to remove everything within main uh because the main is managing uh everything within the center of this component all right so I'm first going to change it to Center justify Center and uh let's go to this payment plan component and I'm going to change its name to the payment and uh here in the page. TSX I can add a div and I can add a class name Flex Gap 8 and inside it let's try to add payment three [Music] times like this and let's see you can see that it is showing pretty good but it seems that there has to be some padding on left and right which was not showing over here in VZ but we can add that padding over here by going to the payment plan and at the top card we can add it like this px30 and now you can see that it's looking good and currently you can see that it is looking like uh a static data we can use it uh Dynamic data for this uh because this is how we are loading over here so here we can add multiple properties like uh this let me add that we are going to pass uh this price show Bill type color and uh we can add these properties uh to each payment type as well all right and now in the payment plan we can receive all of these values which are being passed over here uh price show Bill typee and color so let's try to add price show Bill type and color and the for now let's try to give type any to these okay so for the price we can uh use it like this this is for the price this is for the show Bill and this is for um you can say type all right now you can see that the data is dynamic for this for this as well you can add this dynamic as well but I'm not going to do that and for this background color I can add it over here for this particular Dev uh because this is where this uh top border is being shown so I'm going to add style background color to color all right all right so you can see that I'm passing the different color over here and this is the button it's looking pretty good we can pass this color as well and the purpose of this video is to show you this v.d built by versal and this is awesome this is the free variant still we can use it if you are not a uiux developer you can get help from it you can copy the code from here and you can add some modification based upon your requirement but overall when you try to write this much code write the tailent CSS classes uh without having uh much experience in Tailwind CSS it is really going to help you guys so let me know what you think about this VZ tool and if anybody of you using the pro verion of it premium version let me know how good it is thank you so much for watching I'll be coming up with more more such videos along with the Project based videos in next js14

Channel: Programming with Umair

Views: 319

Keywords: next.js 14 shadcn, shadcn, tailwindcss, shadcn vs daisyui, Build UI/UX with ai, v0.dev, v0 by vercel, react, nextjs, Build interactive websites, Build websites with ai, next.js 14 tutorial, Add animations with tailwindcss

Id: 5M9TFjYPKnw

Length: 13min 33sec (813 seconds)

Published: Thu Mar 21 2024