This UI Library Just Does Everything Right

yesterday I finished the back end for a service I'm building that lets you convert a YouTube video into a Blog article and the question was what do I use for the front end that a saves me a lot of time and B looks criminally good then I saw that one of my favorite UI libraries had made a change just recently that makes it so much easier to work with what changed in this UI library and why is it so good now and the answer is two things have changed first off there are new components in the library so if we take a look at the components we can see there's a new flag on some components if you're not familiar with the UI Library it's ui.shadcn.com one of my by far favorite UI libraries for react or nexjs first one that's new is the alert let's quickly go through the new ones and then take a look at the definitely Superior change that is new in this update that just recently came out so first component that's new is a little alert nothing huge then a batch very very tiny change then there is a calendar and this one's actually pretty cool I'm very excited for this this is a component we've previously used in open source projects and this just looks good man just looks very clean and then last thing that's new is a card component that you can toggle and then just quickly the last thing that's new is the skeleton now the skeleton is not a huge change anyways because there are libraries that do this just as well but it is cool to have all this together in one Library however these new components are not what I'm so excited for what I am so excited for is this right here we can see there's a CLI to this component library now and let me show you the full benefits of what this provides to us we can copy this npx command that is provided to us right here and then secondly we can see there is another add command that we're going to get to in a second that is very very cool let's copy this npx command and go into a brand new nexjs project and see what happens when we paste in that command for this UI Library let me hit enter and it's going to take a second to load and then it's going to ask me do I want to override some files yeah that's fine because this is a brand new project no issues with that and it will do two things first off it will update the Tailwind config we can see there are a lot of changes in here and then secondly it will provide us later when we add the components with a opinionated file structure which I really enjoy then we see there's a new utility function nothing huge has changed and if we start up this page and take a look at what this looks like in the browser as you can see nothing much has changed so what's up with the UI library and now comes the really cool part we can go to any component that we want added to or application for example let's say we like the calendar what we can do is copy the npx command go into our command line paste it hit enter and that's going to ask us where we want to install this component I'm going to say dot slash components slash UI as already suggested by the command and that's going to create the complete component for us ready to use in our application all the dependencies that we need to use this have been installed for us and in these components in this component folder the component has been created let's drag that into our source directory and let's take a look at what's in here and we can see the calendars in here now this calendar relies on another component let's quickly install that and it's the same thing we can go to the component that we want installed for example the button copy the npx command instead of copy pasting any code we can just get the npx command paste it in here that's going to ask us where we want to install that I'm going to say dot slash Source slash components slash UI hit enter and as you can see that was very fast because it's just creating a single file and now if we restart the typescript server we should be able to see that this dependency can or this import can be resolved now and the calendar is all ready to use it has installed the complete component for us and if you go into our page.tsx let's take a look at what this component looks like let's render out the calendar that we can automatically import from the components hit save and then start up the dev server it seems like there's a peer dependency missing that is State F ends that we need to display the dates correctly let's quickly add that to our project yarn add data defense and then see if the component is working and here we are looks beautiful and it works just perfectly we can go back in the dates now this is not styled so it might look a bit weird on the swipe background but it is as easy as that getting a calendar into your app that looks great how cool is that and adding each component that is in here that is built on Redix UI and pre-styled for you is as easy as copying the npx command pasting it into your command line and then it's ready to be used across your whole application how cool is that I really enjoyed the change I'll be very excited to hear what you think if you like this UI Library as much as I do and then I'll see in the next one have a good one and bye bye

Channel: Josh tried coding

Views: 52,283

Keywords: ui library, react, nextjs, reactjs, react ui, react best ui library, react ui library, next js ui library, shadcn, shadcn ui, josh tried coding, joshtriedcoding

Id: 08a2uDAwKEY

Length: 4min 57sec (297 seconds)

Published: Tue Apr 18 2023