Build Your UI Component Library in React & Next.js | ShadCN UI for Beginners

it's time to talk about a collection of reusable components that have quickly become the standard in the react and nextjs [Music] ecosystem hello and welcome I'm Dave today you will learn how you can build your own component library with shad CN UI and I'll provide links to all resources in the description below I'll also provide a link for you to join my Discord server where you can discuss web development with other students and you can ask questions that I can answer and receive help from other viewers too I look forward to seeing you there today we're looking at Shad CN UI it's a library that I've been using in projects at my job and it's quickly become the standard in the react xjs ecosystem let's look at how this Library works it says build your component library but it doesn't say that it's a component library and we'll talk more about that in just a second what I want to highlight here is it's accessible it's open source and most importantly it's customizable so we can actually build our own component Library using Shad CN let's click get started and now we're on the introduction page and as it says here this is not a component Library it's a collection of reusable components and we can use these components to build our own component Library so as it says down here use this as a reference to build your own component libraries now Shad also answers the question what do you mean by not a component component Library says I mean you do not install it as a dependency it's not available or distributed by npm now that can be a little bit confusing because we will use npx commands and if you think that's confusing you're not the only one a person who I consider a friend at least a good acquaintance is James qqu and he recently posted this on X and he was having a hard time understanding Shad Cen as well however I think if we go over this clearly today you should be able to follow along and apply this to your projects let's click installation over here in the leftand menu and you can see that several Frameworks are supported there's also a page for manual uh installation and after that if you're going to use just react say a traditional react application you might want to use V up here I'm going to use nextjs today so I will click on that but I do want to scroll down and also highlight that typescript is used by default in Shad Cen but you can opt out so there are instructions for that as well also Shad Cen uses Tailwind so you want to be familiar with Tailwind CSS and typescript to follow along in this tutorial and if you haven't learned those I do have full course videos on both of those on my channel and I'll Show links to those right now now as I said this might be confusing as it said Shad CN components are not installed using npm however there are npm X commands so it's not a component library that you install the entire thing we'll just use these npx commands to install the bits of the components that we want so I'm going to copy this first command and then choose npm because that is what I will be using and now let's go to vs code I'm in VSS code and I have an empty folder as if I'm starting a new project and so I want to press control and the back tick to open up my terminal window I'm going to paste in that command which will start a nextjs application and you can see it already answered a few questions so we called this application my app and then we're using typescript we're using tailwind and we're using ES lint we will still get asked a few questions like if we want to use the source directory so I'll just press enter and yes I want to use the app router and no on changing the import Alias and everything else was already answered in that one line we pasted in so now I'll go ahead and let this complete installing the project and then I'll come back back in the documentation the next command we need to run in the CLI is this npx for Shad CN so let's go ahead and copy that choose npm once again and back to vs code and I'm back in vs code and now notice I have opened up the my app folder in vs code I'm not in the parent folder any longer so now let's once again open a terminal window and we'll run this command to initialize Shad CN in our project and it's going to ask us a couple of questions I'm just going to choose the default and I'll choose slate as well for the color theme and yes we do want CSS variables that will help us use light and dark mode or change themes now as soon as this finishes installing I'll come back once again and back in the documentation one more time it does have a note here on fonts as you can change everything everything that you'll use with shad CN UI is customizable so you can change the font as well and there are directions here to show you how to do that and then we want to look at the app structure and this is how it will be laid out in our application by default so you can see Shad CN adds a UI directory inside of a components directory and there is where any of the components that we add from Shad CN will be added right there and then any we create we'd want to create in the components directory but not inside UI directory so that would differentiate the two there's also a utils.py directory and then there are the other config files as well and we may see some changes there and as it says down here that's it now we can get started adding individual components let's go look at our code structure first or our file directory structure back in vs code it is finished installing so let's look at this directory structure we can see what has been modified the Tailwind config has been modified the package Json has some new dependencies added to it and we'll use this uh Lucid react dependency as well when we want to bring any icons in later on after that package Json Peak we'll look at the components. Json that has been added this is a file that has been added at the top level and then we can look inside the source directory and then inside the app directory and you can see we do have a global. CSS it was not put inside that style directory as noted in the docs though but here's the global. CSS file and instead of just the Tailwind directives that we usually have at the top when we're using Tailwind now we have a little bit more here and you can see there is a root theme which is the default colors and as we go down a little further there's also a dark theme added by default so you'll see a little bit more inside that global. CSS and as I mentioned inside the lib directory there is a utils Ts that has a function here that uses Tailwind merge and that's what has been added but other than that nothing has changed so we still have the default page here for nextjs and I'm going to press contrl B to hide the file tree alt Z to wrap everything down and I really want to just grab all of this that is added by default inside of a new nextjs project and scroll to the bottom and hold down shift click to select all and backspace we're going to get rid of that and we're going to add our own code hey guys I hope you're enjoying the video you may be surprised to learn that three out of every four viewers nearly 75% of all people who watch my channel aren't subscribed so I just wanted to take a quick second and remind you to hit that subscribe button it really helps me out and if you really like my videos you can get exclusive content and support my channel even more by joining my patreon at patreon.com Dave gray thanks for your consideration and now back to the video back in the docs once again they suggest adding a button as the first component just to try out how Shad CN UI works and that is a good start and of course it shows the code here it's very simple when you first start so let's do that I'm going to copy this once again choose npm and now I'll use this at the command line and VSS code so then we can have a button component from Shad CN UI in our project back in vs code I'm going to press contrl B to once again show the file tree contrl back tick to show the terminal window and then I'm going to paste in that command to add the button to our project and very shortly we should have this button installed and then we should see it inside of the UI directory that's inside of the components directory so it says it's complete let's click and open components here inside of the UI directory we have the button. TSX and this is what has been added I can once again hide the file tree so we can see a little better and press alt Z to wrap this down and you don't actually have to understand everything that is going on here to use Shad CN UI but it is a button component and it has some variants so when we use this component we can actually set a value for the variant we can have the default and if we don't set it that's what will be used there's also destructive outline secondary ghost and Link likewise there is a size value we can add and there's small large and icon as well as the default now not every component in Shad CN UI has this but the button does so you want to look at the descriptions of each component or the API for each component as you would add them so now we have a button let's remove this import of the image and I will import button here at the top and it comes from our components sl/ button and then we can just add a button right here inside of our code and let's just put submit because that's something we would normally see now this will have the default values so instead of submit I could actually label this default and we'll just continue to label any buttons we add with the different values that we would put in but this would be the complete default button so let's just open up our project now I'll type npm undev and we'll get this started on Local Host Port 3000 control click that and we'll launch lach this in Chrome and now we see our default button here and it already has Styles applied to it as well so you can see when I Mouse over it also gets a little lighter and of course I'm going to change this just a little so we can see this in the middle of the page so let's go back to vs code back in VSS code let's CL the close the terminal window let's wrap this button in a main element and I'll put a few styles on here so you can see I've got the height of the screen it's a flex box and I'm justifying everything in the center now I need to put the closing main element as well and now that should put that button in the center but before we go back and look let's add some more buttons and I'm going to do that by just pasting these in but they will be clearly labeled so we have a button here that is a size small we have a button size large and a button size icon then we also have buttons with variance here so the destructive is I just labeled it cancel because that seems like good for the destructive theme but then I labeled the others what they are ghost outline secondary and of course you can use the variant and the size at the same time and I do that here at the end to just make a custom button to show you what is possible because I'm using the ghost variant the size icon and then you can override anything that's already applied to any of these components by just providing your own class names from Tailwind so I wanted a rounded button and then I put a little rocket in there just for the icon let's save these changes and look once again at Chrome I'm back in Chrome and here's all of the buttons we've added now so here's the default button and of course this is a light mode or light theme right now here is the smaller button here's a larger button here is the icon size button now here's a button with the destructive theme notice the button with ghost we don't even see a button until we Mouse over and then it starts to show that outline in the background then we have the outline button that also kind of has ghost applied but it also has a border and then we have the secondary I think that was the secondary variant and finally we have the icon button that we rounded and it had the Ghost theme so when I Mouse over you see the circle you often see these in menus and I saw one of these recently at hash node and I wanted to apply it to my blog and I did that with shad CN UI let me quickly show you those I'm on my hash node page and as we look at these icons up here at the top left we can see these circles appear underneath each one of the icons so that's where I got the idea use that ghost button with the rounded full class which makes it a circle and then it only appears when you Mouse over and you can see that here in the top right as well and then I applied it to my blog after I saw it on hash node and I did the same thing with the icons here in the top right and speaking of my blog I'll scroll down here just a little bit and find the article so light and dark mode in nextjs if you want to apply that to see how that would apply to these buttons and anything you do with shad CN this will work it's what I'm using on my blog as well I'll put a link to this article in the video description I've also got a video about it and that video is linked in this article but I'll also link to that video in the description as well so back to the example project here we're currently in light mode if you want to see how these look in dark mode without actually applying the change and everything from my tutorial about light and dark mode let me show you how to quickly do that and we're back in VSS code I'm going to show the file tree once again with controlb let's just go to the global. CSS now right now this is what is being shown it's the default theme it is the root theme here so I'm just going to copy this with contrl C scroll down to where it has the dark class and I'm going to replace dark with root once again so this will overwrite what's above it we can save this now let's go back and look at everything and Chrome and you can see dark mode has been applied so that's what these buttons look like in dark mode as well so that's a quick way to test it out and I'm going to switch that back right now so we'll come back here and I'll just press contrl Z to undo and contrl S to save the file once again and so you may be thinking this is nice we've looked at some buttons but these aren't really your own components your own component Library we're just going with what's available in Shad CN right now and you can do that but as it says on the homepage you can build your own component Library by making customizations as I did with this final button down here with the rocket so let's look at how we can make one more custom component to start building your own custom component Library back on the Shad CN UI website I want to scroll down and there's a components menu on the left hand I'm going to scroll down to where we see input and click that now there are several examples anytime you visit one of the components pages and you can see the different examples on the page and besides that you can also look at the code for the input or whichever component you're looking at so all I'm going to do right now is scroll down here to the installation part once again copy the npx command for npm and I'm going to add this input to my project again this not being a complete component Library it doesn't add all of these components at once you only add the components you need one at a time I'm back in VSS code let's open the terminal window contrl C to briefly stop the project I'll paste in this command to install the input now from Shad CN UI into the project quickly added that and I'll Arrow back up to npm runev so the project starts once again but we don't want to go back and look at Chrome yet let's close the GL globals and now let's highlight this components directory here we want to create our own component inside this directory but not inside the UI directory so I'm going to highlight component components here create a new file I'm going to call this search input. TSX now at the top of my search input component I want to import the input that we just installed from uiinput and I also want to import the button component that we have installed and finally I want to import search which is going to be a search icon from that loose side react pendency that was already added when we initialized Shad CN because it uses this Library as well and you can look up lots of icons from this library on the web with those Imports added let's start with our props so I'll say type props going to set this equal to an object that has a placeholder and I'm going to make this optional and this is a string so simple props here and of course you could make this more complex if you want to now I'm going to say export function search input there we go this is going to receive that placeholder as props after that we can start our function let's return our jsx and so inside of the parentheses I'm going to start with a div now this div is going to have several classes as it's going to be the parent container for everything else so I'm going to say border I also want round rounded and I'll put large on that so it has just rounded Corners then we'll make it flex and we want justify Dash here we can choose that from the list between and items Center that we can choose as well now alt Z to wrap that down and of course I'll put the closing div on another space so we can put everything else in between now let's start with the input element and now this input can have everything that a normal HTML input can have and we can override anything we want with class names as well but I just need to put a few things on here so I'm going to put type equals text after that I want our placeholder that we're passing in as a prop or we might have a default value so here I'll say placeholder or it could possibly just be search as the default value which would work for me and of course you could use whatever you want after that we also need to have a class name here because we don't want a border on the input so I'm going to say border equals none we want the border on the parent so now that we've added our input component let's go ahead and add our search component as well that search icon and the button of course that wraps around it so we'll have our button and now for the button we don't really need to override anything but we want to add those values that are possible so the variant is going to be G post so we're not going to see anything change unless we hover over it and then also we want a size and the size is going to be icon because we're putting an icon inside of it and the icon is going to be that search icon that we imported from lose side react then we also want a span here just for screen readers because we're using an icon on the button so I want the span I'll say class name equals this is sr- only for screen readers something that tail supplies that's nice and here we can describe what the button actually does so I'll just say search button and save now we have our own component for a search input that we can use anywhere inside of our application so let's go ahead and import this over in our page and then we can use it and then we'll see it in Chrome after we save everything so we'll import our search input component and now inside of this main element I want to wrap it in form now I'm not going to make this a fully functional form I'm just going to provide a rooll equal to search because that's what this is you would normally of course have an action for the form of where it would be submitted to or possibly calling a server action but for here we'll just put in search input now we could pass a placeholder or we could just use the default value and I'll just go with the default value for now that says search so now that we've saved that let's look at our application in Chrome and see how this looks I need to go back to the tab with our application possibly refresh maybe I need to restart the application as well oh I bet nope there it is and there's our search input so we can type in it you can see we didn't change the highlighting around the actual text input when we're inside of it you could do that as well you could have it highlight the full outside but right now this is probably more accessible where When You tab through it tabs to the button tabs to the input but when we just look at it it is a search input so we've created our own component that we could use anywhere in an application that we need a search input so I hope this tutorial has helped you get started with shad CN UI and you can start building your own component libraries explore all of the available components that you can modify at the website for Shad CN that I'll link to in the video description hey guys giving a quick shout out to my patrons holy coder is a progress provider and dad is a member at the senior level also thank you to all of the junior members you're all helping me reach my goals and if you haven't checked out my patreon it's got exclusive content and early release content and it's not one of those patreons that doesn't get many posts I'm active on there every week so please check it out if you haven't remember to keep striving for Progress over Perfection and a little progress every day will go a very long way please give this video a like if it's helped you and thank you for watching and subscribing you're helping my channel grow have a great day and let's write more code together very soon

Channel: Dave Gray

Views: 18,821

Keywords: ui component library, shadcn, shadcn ui, shadcn/ui, shadcn ui for beginners, shadcn ui intro, intro to shadcn, ui, ui component libary, ui componant library, create react ui component library, create ui component library, build ui component library, shadcn ui component library, component library, best component library, react component library, next.js component library, nextjs component library, shadcn next.js, shadcn nextjs, shadcn react, shadcn ui next.js, shadcn ui nextjs

Id: v0_AT8zaLo8

Length: 22min 37sec (1357 seconds)

Published: Fri Apr 12 2024