Shadcn UI Crash Course #1 - Introduction & Setup

okay then my friends so first up what is Sharden and why would we want to use it well in simple terms it's a collection of different UI components that we can then use within any framework that supports react components whether that be nextjs Gatsby Astro or whatever else and the way we can use them is by either coming to the examples on the documentation and just copying and pasting them into our own projects or by using The Shard Cen UI CLI to automatically generate the components for us in inside our project directory on demand so it's a little bit different from a standard component library and that we don't have to manually install a Shard CM package via npm or anything like that we just pick and choose the components we need and we drop them directly into our own source code either by copying and paste in by using The Shard CN CLI to generate them for us and there's quite an extensive list of different components we can use like buttons form Fields dialogues accordion Etc they're all built on top of rad UI Primitives as well which is a really lowlevel UI component library with a really big focus on accessibility and then they're styled using Tailwind CSS in a really clean and consistent way so they offer The Best of Both Worlds really accessibility and a nice clean style and they're really easy to pick up and run with so in this series then I'm going to be walking you through how we can use just a handful of these different components in a next JS project and we'll be using the Sharden C to generate them we'll also be looking at how we can customize the components using different theme colors as well so instead of the grayscale theme that we get by default we could use colors like purple instead like these buttons right here now before we get started I just want to point out that I've created course files for each lesson in the series and I've uploaded them all to this repo on GitHub so I'll leave the link to this page down below the video and each lesson in the series has its own branch in the repo so to download the code for a specific lesson just select the appropriate Branch first then hit the code button to download a zip folder of it I do also want to mention that before you start with Shard CN UI it's probably going to be best if you already know how to use nextjs or at least react since Sharden UI is built for any framework that supports react components so if you want to learn nextjs first then definitely check out my nextjs masterclass which I will leave the link to down below the video as well otherwise feel free to check out some of my react playlist on YouTube as well so I'm here on The Shard CN UI docs on the getting started guide and you can see the first thing we need to do is make a new nextjs project which we'll do in a minute but then after that we need to run The Shard CN CLI to set up a few things for the project so when we run this Command right here it's going to ask us a bunch of different questions to configure a components. Json file which then tells Sharden a little bit about how we want our project to be set up so questions like the base color we want the components to have whether we want to use CSS variables for the theme colors Etc and then once we've done that we we can freely use The Shard CN CLI again to generate UI components as we need them so I'm going to copy this command so that we can use it later all right then so the first thing we need to do is make a nextjs application so let's do that now by coming to a terminal and we just want to type npx create next app at latest to get the latest version and then we're going to give this project a name of ninja hyphen recipes or whatever else you want to call it and then we hit enter to create this project all right then so yes let's proceed and then typescript yes yes link yes Tailwind yes Source directory yeah I'm going to use the source directory the app browser yes and no we don't need to customize that and that's going to install the project for us all right so now that's finished I'm going to CD into that new project directory ninja hyphen recipes like so and then I'm going to run that Shad CN UI CLI command that we copied before so npx Shard CN UI at latest then in it and this is just going to ask us a few different questions about the project so first of all yeah we want to use typescript the default style slates and we do need to change this so we need to go into the source folder first of all so Source then app and then global. CSS because we chose to have the source folder then press enter would you like to use CSS variables for the yes we do want to do that where is your Tailwind config located yep use the default default default server components yeah we'll be using those and yes we want to do that as well so now it's going to generate a few different files for us now it's done that I'm going to open this up in Visual Studio code and then let me just bring that over here all right then so now we've got the next JS project set up and there's also some added extras inside this directory as well for Sharden so inside the source folder you're going to see a components folder first of all this is where Shard CN UI is going to place all the components when we generate them next we've got a lib folder and inside that is a utils typescript file which contains a helper function called CN that Shard Cen uses to conditionally add Tailwind classes to components inside the app folder if you look at the global. CSS file you're going to see a bunch of CSS variables that Shaden uses for the colors of components when you want to update your color theme this is where You' probably start we're going to take a look at that later and then finally we've got the components. Json file which contains all of the information that we gave to Shard Cen when we set up the project you're also going to see a few properties added to the Tailwind config file as well to extend the theme with the color variables defined in the globals CSS file all right cool so now I just want to clean this data project up a little bit and also add a few lines of generic CSS to style headings and text so let's actually do that first I'm going to head to the global. CSS file and paste in just a few CSS rules underneath all the variables and stuff and these just Target the main and nav elements to give them some margin and also P tags H1s and H2S to apply some basic styling to them all right so now let's clean up the page file and also the layout file so in the page file I'm going to delete absolutely everything that comes along for the ride when we start a new nextjs project loads of content here let's get rid of all that and then we'll replace it with just a main tag and inside that we'll say home and then we'll get rid of the import at the top as well we don't need that right now save that and then let's go to the layout file and what I'd like to do is just cut this then inside the body we'll have a nav okay let's create that from scratch nav inside the nav an H1 and that will say recipes for ninjas all right then below the nav we will paste in the children which is basically the page content so let's save that now and now we can try previewing this in a browser so let me see npm run Dev this is going to spin up local server Local Host Port 3000 so we can preview this in the browser and there we go my friends that is our project so far we have a title and we have the tiniest bit of content on the homepage so in the next lesson what we're going to do is try creating our first Shard C nuui component which is going to be the card component

Channel: Net Ninja

Views: 56,768

Keywords: shadcn, shadcn crash course, shadcn ui, shadcn tutorial, shadcn ui crash course, shadcn ui tutorial, shadcnui, shad cn, shadcdn, shad cdn, crash course, tutorial, react ui, next.js ui

Id: wcTzlJi2Oz4

Length: 7min 29sec (449 seconds)

Published: Mon Oct 30 2023