The Best UI Components that EVERYONE is Using!

who knew CSS styling could be so easy what if I told you it's as easy as copying and pasting and no not from stack Overflow from chat cnui in this video I'll show you how easy it is to use and we'll build this amazing looking UI in just 20 minutes [Music] is not a component library but it is a collection of reusable react components that you can use to build your applications or even create your own component Library if you want to you can just copy and paste any of the components that you need or even better just use their CLI to make sure that you get everything set up correctly now you don't even have to install Shad cnui as a dependency itself there are no npm packages for it in fact instead chat cnui combines two amazing libraries Radix UI and Tailwind CSS now I've heard some people call it Radix I call it Radix because I think it's rad so if you're unfamiliar with Radix it provides unstyled accessible components and this is the key it's not opinionated it allows for full customization but it does all of the accessibility related implementations for you which can be a lot to think about if you're building something from scratch so it figures all of this out for you with full keyboard navigation Assistive Technology support Collision detection and many more accessibility considerations and then of course there's Tailwind CSS this is an amazing utility-first CSS framework that allows you to use predefined utility classes directly in your markup instead of writing out all of the CSS by hand it saves a lot of time and hassle now you might be wondering why not just use Radix why do we need Shad CN well Radix is great but it comes unstyled which again is great for customizability but I'm a little lazy and I'd like to start with something that looks nice as a base and then I can easily customize it and that's what Shad CN provides it gives us great looking components with basic styling out of the box and plus you can easily update the existing Styles that's because again these are just copy and paste boilerplate components not a UI library that gets installed these components will live right here in your react components folder here's an example this is the button component oh and did I mention typescript report now it also supports dark mode out of the box and a brand new feature of chat cnui are themes you can now choose from several predefined themes and just copy and paste the CSS variables and then everything in your app will have the updated theme Styles so I'm going to walk you through all of this throughout this video so first things first how do we get Shad cnui set up so that we can start using it since these are just react components they can be used in various react-based Frameworks so I'm going to walk you through the setup in Astro Veet Gatsby remix and next.js all of the major react Frameworks now there are timestamps if you want to skip to a specific framework after I go through all of the different ways that you can set it up we're going to start building out our application which is basically the same no matter which framework you use so for that I'm going to use next.js and we're going to use the new next JS 13.4 app directory because it has some amazing new features that are are really helpful all right let's see how we can get Shad CDN working in Astro the first thing that I'll do is npm create Astro at latest and I'm going to do that right here in this directory and I don't need any sample files so we'll just create an empty project we're going to install the dependencies yes we're going to use typescript yes and strict yes GitHub repo I'm going to say no all right next we're going to add react so npx Astro add react and then we'll say yes to all of the questions here all right and now we're going to install Tailwind so npx Astro add Tailwind again we'll say yes to everything right now let's open up our TS config and we're going to add some compiler options so base URL of period and then we're going to add in our resolve paths we'll save that and go back into our terminal and now we're going to initialize Shad CDN so that's going to be npx Shad CDN Dash UI at latest and knit and let's answer these questions are we going to use typescript yes which style would you like I'm going to choose New York the base color of slate that's good my Global CSS file so this is Astro so I'm going to say it's going to be in dot slash Source slash Styles slash globals CSS and then are we going to use CSS variables yes our Tailwind config okay so this is going to be Tailwind dot config dot CJs and then our aliases for components sure our utils yep react server components I'm going to say no and then proceeding creating the components Json yes awesome all right so that is done now what we need to do is let's go ahead and close this we're going to go into our Astro config.mjs file and we're going to add some extra Tailwind configurations here so I'm going to apply base Styles and I'm going to set that to false this is going to prevent Tailwind from applying the base Styles twice since we're defining that in our Global CSS as well so I'm going to save this and there's one issue that I came across Tailwind config let's open that up and we will see here that it is not going to look at any of the astrophiles or any other files besides typescript and uh TS and TSX so we need to actually fix that if all that we're using this for is react and we don't care about the astrophiles then you're okay but if you want to use the dot astrophiles then we'll need to update this all right so this last line here under Source I'm going to update that to include any of these extensions here so Astro HTML JavaScript jsx markdown spelled typescript view any of them that have Tailwind in them should be compiled all right we'll save that now let's open up our terminal and let's just do an npm run Dev to make sure that everything's working alright so that's running on localhost 3000 uh looks like it's working let's go over to our source and then pages and index dot Astro and we're actually not importing our Global Styles yet so let's go ahead and import our Global Styles at slash styles slash globals.css and we can see the Tailwind Styles have now been applied let's go ahead and add let's just change this to a div and we're going to add a class let's make it a grid and we'll Place items Center and let's make the height screen so 100 viewport height there we go so now Astro is right there in the middle so now that we have everything set up let's see how we can use a Shad CD and component in Astro so if you go over to the documentation on Shad CDN you can see all the different components that you can use and so you could actually go to the code here and just copy and paste this component into your application and it would work just fine but just to make things so much easier there's a CLI so let's just copy this CLI command and then let's open up our terminal and we're going to go ahead and kill the server and let's go ahead and paste in that command so npx shadcdn UI at latest add button and then we're going to say yes go ahead and add those dependencies and again this is using Radix UI and tail end and so it has imported that button and so now if we go over to Source components under UI we have a button and so this is the Shad CDN button we can see that it's using Radix UI and it has all of these different variants here so the default and these are the Styles being applied from Tailwind utility classes so we have the default style destructive outline secondary ghost link we have different sizes that we can choose from default small large and icon if we wanted to customize these at our own variant at our own size we can easily do that and then we can see of course it has typescript support and then the button is actually rendered here so we can use this component now anywhere in our application so let's go ahead and do that we'll go back to index.astro and let's go ahead and add it right here where the Astro is let's go ahead and use button and let's just say click me and then we need to import that button so let's import button it almost got it right so it's button from components UI and then button all right let's save that and then let's go ahead and npm run Dev start our server again and check it out and there we go we have a button in our Astro project now if I go back here to the button I can say size is going to be large now it's large I can say the variant is going to be outline there we go outline uh ghost was another one pretty cool all right so now you can import any of the other components into your application using the same method all right now let's set up chat CDN using Veet so the first thing that we're going to do in an empty directory is we're going to npm create Veet at latest and I'm going to do that in this directory so period at the end we are going to set up react we're going to use typescript and that was pretty quick but we still have to run the npm I for npm install let everything install next we're going to npm install as a Dev dependency Tailwind CSS post CSS and auto prefixer and then we're going to npx Tailwind CSS and knit Dash p so we're going to initialize our Tailwind configuration so let that run all right so that created our post CSS config our Tailwind config and we do need to go into the TS config now and we're going to add some compiler options here so we're going to add our base URL of period and then our resolve paths so let's save that we'll go back to our terminal now we're going to npm install our node.js typescript types okay now next step is to go to our Veet config file and we need to help it resolve some paths in here as well so we're going to import path from path and then after react here we're going to resolve and set as an alias at and then resolvepath.source so that's the initial setup let's go back to our terminal now we can initialize Chad CDN so npx Shad CDN Dash UI at latest and knit now we're going to answer some questions so yes we're going to use typescript I'm going to choose the New York style slate as my base color my Global CSS file that's going to be under Source slash index.css we're going to use CSS variables yes Tailwind config is tailwind.config.js I'll hit enter we'll do an alias for our components and for our utils yes and then react server components I'll say no and then yes proceed with creating the components Json file amazing all right so everything is set up now for that let's close this and now if we go into source and then app.tsx let's go ahead and get rid of all the boilerplate stuff in here and then we can just change this to a div let's add a class and we're going to say grid Place items Center let's do a height of screen to make it a full height and then in here let's just say wheat is awesome let's open up our terminal npm run Dev and let's check it out alright so running on localhost 5173 and Veet is awesome back over here in our app.tsx we actually don't need any of this stuff anymore we don't need our use State uh let's go ahead and save that cool and now that everything is set up in the let's actually use Chad CDN in this application so if we go over to the Shad CDN documentation let's go ahead and make this a little bit wider and you can see all of the different components that we can import into our application we're going to look at this button here so you could actually go to the code you could just copy and paste this code into your application and it would just work but to make things so much easier let's just use the CLI so we're going to copy this let's go over to our terminal and we're going to kill our server let's go ahead and paste in that command so npx Shad CDN UI at latest add button all right so we're going to do that now you can add multiple components at the same time you could say add button alert Avatar badge however many you want at the same time let's say yes there alright cool so now that that has installed what it did is it actually basically copied and pasted that for us it put it into our components under Source components UI and then button so now we have this button component in our application we have the actual code for it so we can see that this is using Radix UI and this button has a bunch of variants so we have a default button we see all of these Tailwind utility classes for this us this variant of the button we have a destructive outline secondary ghost link we have different sizes to choose from and we can easily update these we can add in another size we can add another variant very easily and then of course this works with typescript and here is the button actually being rendered so now we can use this component anywhere in our application so let's go ahead and use that in our app.tsx file let's go ahead and replace Veet is Awesome with a button so let's go ahead and type a button let's see if it Imports it there we go so let's go ahead and just say click me let's save that and check it out we'll need to go back into our terminal npm run Dev and there's our button cool so we can go into the button now and we can say size is going to equal LG for large now it's a larger button we can say variant we'll say that's going to be we can see that obvious code is helping me out here it could be destructive let's say that makes it red let's say ghost that looks pretty cool too I think another one is outline all right so now you can import any other Shad CN components just like we just did with the button now let's see how we can get Shad CN working in Gatsby so the first thing that we're going to do is npm and knit Gatsby what do we want to call our site I'll call it Shad CN gets B where do you want to install it sure chancy and Gatsby we're going to use typescript yes uh no we don't want a CMS for styling systems we're going to select tail and CSS we want any other plugins uh we're just going to skip all of those and say done and then do this yes all right now we need to update our TS config file so under compiler options we need to add in some options here for our resolve paths so our base URL is Dot and then our paths here so we'll save that all right next in our root here we need to create a new file and we're going to call it Gatsby Dash node.ts and then in here we're going to import Star as path from path and this is all going to help us set our resolve paths so we'll close that and now we're ready to initialize Shad CN so let's go back into our terminal and now we're going to npx Shad CN UI at latest in knit then we're going to answer some questions are we going to use typescript yes which style I'll choose New York base color slate that's good Global CSS file that is going to be located at dot slash Source Styles slash globals dot CSS uh do we want to use CSS variables yes Tailwind config that is the correct I'll just hit enter Alias for components yes that's good Alias free utils sure are we going to use server components no and then proceed yes now let's go into Source pages index.tsx and there's so much boilerplate in here we don't need any of this boilerplate so let's just go ahead and get rid of all of it all right we'll call this a main sure and then let's say Gatsby is amazing now let's add some classes so class name we're going to say grid we'll save Place items Center and the height is going to be screened so full height so I should Center this in the screen so let's save that let's open up our terminal I'll say npm run develop and let's check it out all right so that looks like it's working Tailwind is working now let's actually import some Shad CN components so if we go over to the shadzian documentation let me open this up a little bit so you can see all these different components that we could import so we're going to look at the button we could go to the code here just copy and paste this code put it into our application and it would work but to make things so much easier we'll just use the CLI so let's copy this CLI command and then let's kill the server all right so we're going to run npx Shad CN UI at latest add button and then we want to install component and dependencies yes so this does install Radix UI as the dependencies so now if we go over to components and then under components UI we now have a button.tsx file so this is what Shad CN is it's these components and so we can see that it's using Radix we can see that we have variants here so there is a default destructive outline secondary and so on and these are all using Tailwind CSS utility classes we also have sizes that we can choose from and we can easily update these we can add another size we can add other variants very easily and then of course this uses typescript and then here is where the component is rendered and so now we can use this component anywhere in our application so let's go ahead and use this component right here instead of Gatsby is amazing let's let's use this button component so button and we're going to go ahead and import that and then we'll say click me and then close off that button all right let's save that go to our terminal let's run npm run develop and let's check it out and there we go click me and so this doesn't quite look right there's something something off so let's just check and make sure our styles um okay so I specified that these Styles would be in globals with a plural with the S not CSS there's actually Global so when we initialized Shad CDN it created this globals plural so let's go ahead and just copy all of this and we're going to paste it all into global and we should still have the same thing at the top Tailwind all right let's save that and see if that fixes it there we go now it looks right all right so for Gatsby it's Global singular not plural so let's go ahead and delete the plural and we should probably update our components file here because it is referring to globals plural so let's say global and that should fix everything all right so now we have our button rendering looks good we could change our size we could say that it's going to be large so it's a bigger button uh we could change the variant and we can say that this is going to be destructive or we could change it to outline or ghost I think there's some others but those are a few there we go looks good all right so now you can use any of the other Shad CN components in Gatsby just the same way that we did with the button now it's time to see how to get shazian working in remix alright so the first thing we're going to do in an empty folder is npx create Dash remix at latest and I'm going to use dot to install in this current directory yes proceed we're going to go with just the basics how we're going to deploy this let's say versus Cell we're going to use typescript and then run npm install of course all right now let's initialize Shad CN so we're going to run npx Shad cn-ui at latest and knit and we'll answer some questions we're going to use typescript yes uh what style I'll choose New York style the Slate base color will be slate Global CSS file that is going to be under app slash tailwind.css are we going to use CSS variables yes and where is our tail end config located it's going to be tailwind.config.js so I'll just hit enter for components that is going to be tilde slash components and then for the utils that's going to be tilde slash lib slash utils and then we're going to use react server components we'll say no and then proceed yes cool so next we need to install Tailwind so we're going to npm add as a Dev dependency Tailwind CSS latest and auto prefixer latest so let's run that all right that's pretty quick all right so now in our root let's create a file we're going to call it host CSS Dot config.js and in here we're going to export these plugins Tailwind CSS and auto prefixer and then in our remix config.js file under module exports we're going to add Tailwind to true and ocss to true all right so now under app and then root.tsx we're going to import our styles from slash Tailwind CSS and then under our const links we're going to add to this array rail style sheet and href is going to be this Tailwind CSS styles that we just imported save that close it and now let's run it and make sure that everything works so let's open up our terminal and we'll do npm run Dev and let's check it out all right looks like we've got something working here so let's go into app and then routes underscore index.tsx and then let's just take all of this and we're just going to return a div add to this a class name we're going to say grid Place items Center and then the height is going to be screened to make it a full height and then we'll say remix is amazing save that there we go it's centered like it should be it looks like everything is working we have a Tailwind we have we have Shad CN all set up ready to go so let's go ahead and start using a Chad CN component let's see how that works so if we go over to the shazian documentation you can see all of these different components that we can import so we're going to look at the button here now we could just go to the code here and copy and paste this code into our application and it would work but it's so much easier to use the CLI so let's just go right here we're going to copy this CLI command here we'll go back into our terminal and let's kill the server and let's run that command so it's npx Shad cn-ui at latest add button and we can add as many components at the same time if we wanted to so we can say add button Avatar drop down menu Etc however many you want add them all at the same time if you want all right so now do we want to install the components and their dependencies so we'll say yes so this is going to install the Radix U AI dependency and then we're going to see what it created for us so now under app components there's a UI folder now and then within that we now have a button.tsx file so this is our Shad CN button component we can see that it is using Radix UI it has variants all of these different variants are predefined by Chad CN we have all of these great Tailwind CSS utility classes so we can choose from any of these variants we also have sizes that we can choose from and these are so easy to update we can add another size if we wanted we could change one of these very easily we could add another variant and then we see that it uses typescript and here is the component that it's going to render so now we can use this component throughout our application so let's go ahead and replace this with our button say click me and it imported our button at the top already for us so let's save that back into our terminal npm run Dev and let's check it out now and there we go now we have our button so if we go back into the button here we could add in one of those sizes that we saw so let's say it's going to be large we'll save that now we have a large button we could add one of the variants let's say variance is ghost save that now when you hover it you see a little outline there's also an outline variant there we go and I think there is another one that's called destructive and it turns it red so pretty cool now you can use any of the other Chad CN components in remix just like we did with the button now let's get Chad CN working with next.js so another blank folder here we're going to go into our terminal and we're going to npx create next app at latest dot so it's in the current directory we're going to include the typescript flag the Tailwind flag and Es lint so let's go ahead and get all of that installed seed yes you want to use the source directory no I don't app router yes I want to use the app router would you like to customize the default import Alias no all right we got all of that installed now we're going to initialize Chad CN so npx Shad cn-ui at latest in knit we're going to answer some more questions here do we want to use typescript yes what style do we like let's use the New York style base color is going to be slate Global CSS is going to be in the app slash globals CSS so we'll just hit enter CSS variables yes we're going to use those Helen config Helen config is going to be the tailwind.config.ts and then Alias for the components sure that's good Alias for the utils that looks good are we going to use react server components yeah sure let's use them do you want to proceed yes cool so now we should be able to go in to the app folder go into our page and we've got a ton of stuff we can see it's already using Tailwind let's go ahead and remove all of the boilerplate we'll keep the main we're going to change this we're going to say grid Place items Center and the height will set it to the full screen height we don't need the image import so let's delete that and let's say next JS is awesome all right save that now let's go into our terminal and we'll run npm run Dev and make sure it's all working all right next.js is awesome looks good it's all centered as it should be I don't know if you notice but getting Shad CN working with nexjs was a little easier than the other one oh but we're ready now to use shazian in xjs let me show you how to do that let's go over to the documentation here and we can see all the different components that we can import from Chad CN we're going to use the button right now as an example so we could just copy this code into a component and it would work but it's so much easier to use the CLI so we're just going to copy this we'll go into our terminal and let's go ahead and kill our server let's paste that command in so it's npx Shad cn-ui at latest add button now if I wanted to add multiple I could do space button space Avatar space drop down menu Etc as many as you want or you could just delete the button here and say npx Shad cnui at latest add and then it's going to prompt you to select what components do you want to add and you can just use your arrow keys up and down spacebar to select the ones that you want right it's it's like you can select as many as you want right so that's another option too so right now I'm just going to install the button um are you ready to install yes let's do that so it is going to install Radix UI as a dependency but there are no dependencies for Shad CN okay so now when we go to come opponents you're going to see components a UI folder and then button.tsx so this is the Shad CN component so we can see that it is using Radix and then we have some button variants here so these are some variants from chat CN so they use Tailwind CSS utility classes we have destructive outline secondary and so on we have different sizes that are predefined for us and it's so easy to just go ahead and update these they're right here in our components folder we can add another size we could add another variant we can change the existing ones do whatever you want with it and we have full typescript support and then here is the component being rendered so now we can use this component throughout our application let's go ahead and replace this with our new button let's say click me and we can see that it automatically imported my button at the top for me so let's go back into our terminal and npm run Dev and let's check it out now we've got a button litany awesome all right so on this button we can now say size is going to equal I'll say large so now we have a large button we could change the variant let's say the variant is Ghost so now it's a ghost button we could change it to outline now it has that outline around it or another one is destructive and there we go it makes it red so now we can add any other of the Shad CN components just like we did with this button alright now let's see the process and flow of building with Chad CN now that we've got it set up in all of the different Frameworks we're going to build this e-commerce storefront with chat CN and we're going to use next js13 and the new app directory for this now I got inspiration for this project from Antonio so be sure to go check out his YouTube channel codewith Antonio where he builds out something similar with a full back end as well we're going to begin by building the header so in our components folder we're going to create a new file and we're going to call it editor.tsx I'm using a react vs code extension to give me this function stub I don't need the react import so let's go ahead and change this div to a header let's import this into our page folder under the app directory so instead of this button here let's add in our header let's get rid of these classes and we're just going to turn this into a div for now all right so our header is back up here at the top and zoom in a bit let's continue building this out we'll go back into our header.tsx file something we're going to need throughout our site is a container so that we can set a Max width we don't have to do that all over the place we can just do it once so in our components I'm going to add this actually under UI I'm going to add a container.tsx file I'm just going to paste this in we can look at it so we have container props so we're gonna be passing in children here and we're going to return a div and then pass in the children so this is just a reusable container and here's the the magic here MX Auto with full and then Max width of 7xl so let's save that now we can reuse this container throughout our application so in our header we're going to add this container I'm going to add some classes to our header so small and above will be Flex small and above will be justify between vertical padding horizontal padding and a border on the bottom within the container I'm going to add two divs this first div is going to be set to relative add some padding Flex item Center justify between with full and then this next container Flex item Center this is where we're going to have our logo and the company name so for that we're going to use a nexjs link so let's go ahead and import the link as well and here we can enter our store name I'll just leave that for now so let's go ahead and save that and see what we have so far all right so we've got just store name we need to add some more things the next part here is going to be our nav menu so after the store name div we'll add in a nav and then I want to add different nav routes here so in order to do some nav routes I'm going to create an object so let me go back up here to the top and normally this would be you know set on in a database somewhere and you'd import it we're just going to statically set these in the application so these are going to be my routes on the href and the label for each one so now we can Loop through these and create links in our header so back here in our nav we can now map over our routes and within this we're going to add buttons and we need to import our button so let's add that at the top so this is one of the use cases for Shad CN UI is this button as child with a variant of ghost and that is because we're inside this button we're using it as a link so we have our key we have our href which we're pulling from the route and we have some Styles here and then our route label so let's save that and let's take a look at it and because I have these hidden on small screens and then displaying on larger screens they're not showing up right now because we are going to have a menu that's going to come in on smaller screens eventually so let me go ahead and reset the view here to 100 and expand that out now we have our links we hover over them they have the ghost variant so that looks pretty nice all right for the next section of our header after the nav we're going to have another div and at first we're going to have a shopping cart button so this button is going to include an icon for the shopping cart and then a screen reader only will show the word shopping cart but we need to go ahead and install our icon Library so let me open up the terminal we need to kill the server and for this we're going to use Lucid react it's going to npm install Lucid react and I'm going to install a specific version 263.1 because the latest version is having some issues with next JS all right npm run Dev and now next I want to use the shopping cart icon and just give it a height and a width and let's save that and check it out nice so after the shopping cart button we're going to add a theme toggle button we have another button similar to the one above this time we're going to import the Sun and the moon icons from Lucid react so let's save that take a look there we go now it doesn't do anything yet so we'll implement the functionality in just a bit the last piece that I want is a profile button and it's going to show the user's Avatar so for that we're going to need some more chat cnui components so back into the terminal we're going to kill the server all right so it's npx Shad c n u i at latest and then add our Avatar and drop down menu and then yes go ahead and install those I was going to install the required Radix UI dependencies as well all right let's uh npm run Dev start our server again now if we go over here under a components UI you're going to see Avatar and drop down menu all right so now we can use those in our application so under UI I'm going to create a new file I'm going to call it profile button dot TSX and I'm going to paste in the code and let's just review it so I'm importing all of the drop down menu stuff from Shad cnui I'm importing all of the Avatar stuff and I'm creating a profile button so this is going to return a drop down menu with a trigger within the trigger is the avatar for the Avatar I'm going to use this image which I need to bring into my project here's the fallback the fallback is the initials of the user and then we have the drop down menu content so when the drop down menu comes down they're going to see my account there's a separator and then it'll see profile billing subscription separator log out so very simple drop down menu let's go ahead and grab these images so in the link in the description below you're going to find a GitHub repo where you can pull these images from I'm going to go over into public and then I'm going to paste these images and from my GitHub repo so we got some product images hero image everything that you need for this project all right so let's save this profile button and now we can use that in our header so after this last button in the header we're just going to bring in this profile button we'll save it and let's check it out now for a quick second there you saw the user's initials while the image loaded in all right now let's make the theme toggle work the first thing that we're going to need is a theme provider so under components I'm going to create a new file I'm going to call it theme provider TSX and I'll paste this in and we'll look at it so this is going to be a client component so we're going to enter use client at the top we have react we're importing theme provider and theme provider props which comes from next themes which we need to install so let's go into our terminal and let's kill this and let's npm install next themes all right and then let's run the server again so we're good here okay so what we're returning here is a theme provider and we're going to return the theme provider along with the props and the children so now we'll be able to use this to wrap our application with this theme provider so we're going to do that in the layout so we want this to be around all of our pages so we're going to enter that in the layout here so right now in our layout we have our body and then we're just passing all of the children inside the body so we're going to wrap children with the theme provider now we do need to import that at the top and so we have an attribute here of class the default theme is going to be the system theme and then enable system now because I want the header to actually be on every page as well so I should probably move the header into the layout so let me go over to page and we're going to take header out of the page we'll just say contents here for now and we don't need the Imports so let's save that we'll go to the layout and at the top of the theme provider we're going to enter the header and of course we need to import that at the top right now because we are using a context provider in the layout we do need to add use client as well and now everything is still working we have our header now in our layout so now if we go back into our header we can now use that theme provider now again because we're going to be using a context we're going to have to make this a use client now we can import that use theme from next themes and then in our header we're going to grab the theme and the set theme from use theme and then we can use that in our on click which we need to add to our toggle button so we'll add that right here on click and copilot is helping me out here I think that's right let's see that I think that'll work so let's save that let's just give it a try go over here and hey looks like it works nice all right the last bit that I want to add to this header is to make it responsive so before we saw that when the screen is too small you're not going to see the nav menu so if we do that you see that it goes away so we need to add another menu that we can then pull out and in Shad CN UI it's called a sheet so let's go and kill our server and let's npx Shad CN Dash UI at latest add sheet and then yes proceed you can add a dash y after this and it won't ask you a question every single time all right let's npm run Dev again and now in our UI components we should see a sheet all right so let's add the sheet now into our header so I'm going to put that up here uh in right here right before our link for our store name I'm going to add it right here so it's going to be sheet and let's add some imports at the top actually so we're going to import sheet sheet content and Sheet trigger go back down to our sheet here and I'm just going to paste this in so in our sheet trigger we're going to have an icon that's going to be our menu icon that we need to import from lucidreact all right we've got some styles on that and then in the sheet content that's going to be on the left side and then I'm setting some widths and then inside that we have another NAB so when it's too small the nav is going to be on the left sheet when it's a larger screen then the nav is going to look regular at the top and then again we're just going through our routes again adding those links into our sheet into the sheet content so let's save that and take a look at it all right now we have a menu here and when we click on that the sheet comes out and we have our Three Links that like we had before what if I can make this a bit bigger make it easier to see so when we get larger looks like that we've got all of our icons and then as it gets smaller the menu the nav menu goes away and we have this side menu nice so that's it for the header all right let's add the hero section next now this section it only includes one chat cnui component so I'm not going to bore you with typing it all out I'm just going to copy and paste it so we're in our page.tsx file and under home return so I'm just going to paste it right here and we're going to reuse this container that we created earlier so let's go ahead and import that container and the button that we use a little bit further down we also need the shopping bag so let's import The Shopping Bag icon as well alright so we have our container we have a div with some spacing another div with some padding and this is going to contain our background image so we uh we added our images again GitHub repo Linked In the description below you can use any of the assets there we have our image hero image there we have some Styles here and then underneath that we have a div with a call out inside of it that says feature featured products and then inside there a shop now button so let's save that and check it out cool so that's what it looks like on a small screen featured products big shop now button then as we make the screen larger you'll see that it stops the member we have on that container a Max width of 7xl so it stops right there looks really good and again if we change or toggle the theme the colors automatically change as well on the button and the text right after this I want to show all the product cards so let's work on that part so under components and then under UI I'm going to create a new file and we're going to call it product card dot TSX so for this we're going to need the card UI component from Shad cnui so let's go ahead and install that so NP X Chad c n s u i at latest late test add card all right and then let's run our server again and I'll paste this in here and we can take a look at it so we're going to use next image for the images we've got a link that we're pulling in we have all of our card components from chat cnui and then we're going to import some typescript types we actually need to bring that in So at the root of our project let's create a file called types dot TS and for now it's just going to be one interface product we're going to add it into this types.ts because we need to use this product in multiple files and so instead of creating it multiple times let's do it the right way and create a types file all right so now back in our product card we are bringing in our product type which is a part of our product card and so here is our product card component the entire thing is wrapped in a link which is eventually would link to the product page now we're using our card from Chad cnui with some uh basic Styles our card content is going to be the image so the image is coming from our data which is being passed into a product card so we're going to assume that each product has an array of images and so in that data we're going to grab the images and we're just going to grab that first image to display on the card here some basic Styles here we do have on a hover it's going to scale it up a little bit add a little nice animation and then we have in our card footer again from our data we're going to pull the name of the product the category of the product the price and display that on the card so that's a single card we want to have a whole list of cards or a grid of cards so let's create a new file so this time under components I'm going to add a new file called product list dot TSX and let's go over this so we're going to pull in our product card we're going to pull in our product typed remember I said we had to use that multiple times uh and then we are going to create an interface here product list props and here's our product list component so we're going to return a div add some spacing on that and then within that we have our grid so we have grid calls one on a small screen it's two columns on a medium it's three columns and then four columns on a large we have our Gap and then here we're gonna map over our items that are passed to the product list which is then going to create each card passing then each item into each card so fairly simple we'll save this and then let's Implement that into our page so at the bottom of Our Hero Let's see we have our container we have this div I want it to go right here so within this div right after our hero we are going to add in our product list and we're going to pass it a bunch of products so we need to import the product list of course we also need products so again in the GitHub repo you can copy and paste any of this code that you need I'm just going to bring this at the top here and paste in this dummy list so we've got a list of products here it's an array of objects each one has an ID a category a name price and an array of images although each one only has one image all right so that should do it we have our products let's save that let's make this a bit larger and that looks really nice so as we hover over these they have a little bit of Animation there go back to the light mode that looks really nice as well now again the really nice thing about Shad cnui is that it uses Radix and Radix has all of the accessibility features built in so as I am using my keyboard and I'm tabbing through here everything is very accessible and again all by default nothing that we had to do now as I refresh this it loads pretty quick but what if someone is on a slow internet connection we want to be able to show a skeleton as things load in and so Chad cnui has us covered on that so let's go over to our terminal and let's go ahead and npx Shad CN Dash UI at latest and then we're going to add the skeleton and then let's start up our server again and now what we're going to do is a really great feature of the new app directory in next js13 is the loading file that we can add so in our app directory we're going to add a new file and we're going to name it loading.tsx all right so I'm just going to paste this in here again we're going to use our container that we created earlier we're going to use the new skeleton that we imported from Chad C and UI and then we're going to return this loading function within that we have our container and then I've just got some div classes and then I'm just placing the skeletons on the different features that have images that could be loading so we have this first skeleton is our hero and then we've got several skeletons here for our products so let's save that so just to demonstrate I'm going to take this container comment that out and let's pull in our loading and save that and this is what it looks like so on the light screen you can barely see that it's kind of changing colors if we change to the Dark theme you can see that it the colors are kind of pulsating a little bit and indicating that something is loading again you can make these skeletons fit in any shape and size that you need just add telling classes as needed all right let's undo that and go back to normal all right so now I want to show you how you can customize the theme using chat cnui so we have our normal like light and dark theme right but we can actually customize that even more so let's go over to Shad cnui under themes and we can see let's make this a little bit bigger we can choose from different colors here go to customize there's more colors in here so I'm going to pick this orange color we can customize the radius that we want for each item and then see what it looks like in light or dark mode and once you've customized everything just click copy code and copy these CSS variables alright so now all we have to do is go back into our globals.css file which is under app and then we have this base layer remove that paste in what we just copied from before we'll save that and let's go back into our app and now it's already updated we have orange in all of the areas even on our hovers even on when we tab through with um with our accessibility features we have the orange color chassis and UI really helps us by keeping our components consistent they are accessible they're fully customizable it's easy to work with and it looks really good by default so try Shad cnui in your next project and let me know what you think thanks for watching please like And subscribe if you found this video helpful

Channel: codeSTACKr

Views: 132,021

Keywords: react tailwind, react ui library, nextjs 13, ui library, radix ui, shadcn ui, josh tried coding shadcn, josh tried coding, react ui library 2023, react ui library nextjs, next js 13, next js 13.4, next js 13 tutorial, next js 13 app, next js 13 app dir, next js 13 app tutorial, next js 13 app layout, next js 13 app folder, web development, react js, web development full course, react js tutorial, react js full course, react js project, react js course

Id: DTGRIaAJYIo

Length: 54min 6sec (3246 seconds)

Published: Mon Aug 21 2023