Why I Believe This Is The Best UI Library For Next.JS 14

this is the best UI library for nexj in my opinion it is shaten UI it is based on the tel CSS it gives us a wide variety of components utilities functions and a comprehensive icon library and above all these great features we can customize this component in the way we want so in this video I'm going to show you how we can use this UI library in an Nexus version 14 project and I'm going to show you how we can customize the components welcome to Sakura Channel and without further ado let's get right into it okay I open up a brand new nexs 14 project and here in order to install the shaty and UI I go to the documentation of the shaten UI and here click on the documentation section and scroll down for the installation and choose the nextjs okay and then here this is the script for installing the shaten UI and here I click on the copy and it gives me four option for the bundlers I'm going to choose the BN because it is much faster so I go back back to my project here and paste the script for installing the shaten UI it prompts me for choosing the options here I'm going to go ahead with the typescript and select the default style select the base color and it ask me where is my Global CSS file my global. CSS file is inside the SRC directory and then app directory so here we need to change that I'm going to say SRC and then app and then globals CSS okay and then choose with default one it also ask where is my my Tailwind doc config file so in my project it's tail. config.txt one here is the Tailwind doc config.js so I'm going to say Tailwind config TS okay and go with the default one yes I'm going to use the react Z components okay here I'm going to choose yes for creating the components. Json file okay as you can see it creates the component that Json file and here we can change all the selected option that we have just chosen okay so I think we're done with the installation and now let's go to the chat CN UI and the first step here is to select our theme so I go to the theme sections and here as you can see we have the options for selecting the themes color so I can choose this nice blue here and I can also customize it it gives me more options for the themes color and also we can choose the default boorder radius for our components so here after selecting these options we can go ahead and click on the copy code here then I click on the copy here okay get back to my project I go to my SRC directory and then app directory global. CSS file and then choose this CSS variables that are created by the shat CN UI installation stage okay so I remove them just paste the new code here so let's save this and now we can create our first component with the shat CN UI so here I go to the chats in documentation and go to the component section and let's create our first component let's choose the button element so here as you can see in order to create a button element we need to run this script in our terminal so as you can see here the shat CN UI creates a components in the components directory of our application so we can change and customize that component in the way we want it is really awesome for me and I can customize the components so let's create our first component with the shat CN UI I choose the bumbler here and get back to my project here so let's clear this out first paste the script here for creating the button elements okay as you can see it's creating the button and it's done so here if I go to the components directory it creates a UI directory inside it and then a button. TSX file so if I open it you can see it creates the button elements and it creates a variance object for it that has some option variant the default one outline secondary and so on we can add a new variant to this button element if we want that is really easy and also we can change the style of our button components in the way we want so let's use this button element in our homepage so I go to the homepage here and just remove the all initial code that Nexus creates in our homepage so let's select them and remove them okay so now we can use our button your button as you can see it comes from the components directory and then UI and then button. TSX file so here let's import first okay and let's put a caption on it test button okay now let's run our project we can use npm Rand Dev or Bond Dev that's the same so as you can see the Nexus version 14 is really fast in running the development server okay I open up my browser here now as you can see it creates the test button for me so now let me show you how we can customize this button element so let's say we want to add some ta and CS class to the default variant so here I go back to vs code and go to the button components here and in the default variant we can add tail and CSS classes so for example let's say we want when active it means that when the user click on that we can use the scale 95 okay so let's save this and now if I click on it you can see when we click on the button the scale of the button is set to 95% and makes it smaller so let's add a transition to it okay if I click on it you can see it has a nice transition when we click on the button in this way we can easily customize our component so now let's add another components let me create an input component and customize so I go to the shaty and UI component section and scroll down and find the input element okay and then cop copy the script for creating it get back to my vs Cod let's add another terminal here and let's paste the script for creating the input element okay it has created the button element for us and let's go to the homepage here and add a inputs here okay and then import it from the input file in the UI directory okay so let's save this and get back to my browser here and here as you can see it creates the input element for us so let's get back to our homepage here and change it to justify Center and get back here and as you can see it removes the gaps between the button and input element and let's add some Gap here Gap four okay so now let's say we want to add a label element in our input component so every time we need to create an input component we don't need to separately put a label element in our pages and makes the pages more complex so I get back to my project here and go to the input file and here as you can see we have the input element here and this is the input props here so let's add a label to it label it is optional and I'm going to set its type to string okay and now let's put a div here and wrap the input element inside this div okay and then let's add some tail CSS classes here I'm going to use the flex here and then Flex cool to make the flex in the column Direction and let's put a gap here I think Gap one will do the job for us and then here go to the props of the components and extract the label here okay and here before the input we can check if the label is existed label so first let me turn it to a Boolean value so I put two exclamation mark it's not a string anymore it's now turned to a booing value and we can safely use the logic and operator for conditional rendering in this way we don't need to put the torney operator for conditional rendering here okay and then if the label is existed we can render label elements so I put a label here and then we can render the label props here so I get back to my homepage here and now we can add the label props and we can say for example first name okay so here as you can see our input elements now has a label inside it so let's get back to input element and here inside the root de here of the input component we can put a w full class to make it SP all the with the column here so as you can see it's now get back to its original size so in this way we can put a label element in the chat c and UI element we can also add a icon to this input elements and before doing that you should know that when we're installing the Shad CN UI they install a icon Library automatically in our Nexus application so we don't need to install a separate icon library in our project so I get back to my vs code and here I go to the input components and here in the input props here we can add an icon here icon and make it optional and set its type to react elements okay and then here let's extract the icon here from the props of the components okay and let's close this up to have more space here and I go after the basic input element and now we can check if the icon is existed so first let me turn it to a Boolean value and then we can use the logical and operator in our conditional rendering so here if the icon prop is existed we can render a span element here span okay and inside it we can render our icon now we can starty our icon here I'm going to use W4 for its width text slate for example 600 and I'm going to put its position on the absolute and here we are going to position the span element relative to our root de element so I use the relative class in our root div here and let's add top nine relatively to our span element which contains the icon element and left one okay so let's get back to our page component here and here we can use an icon and then set it to a icon component so in order to find our icon we can go to the Lucid react page and here's the address for the Lucid react and I go to the icons and as I said we don't need to install it when we install the shaten UI the shat CN UI install this icon Library automatically CP in our project so we don't need to install that okay I go to the icons here and let's say we want to find a person here so I can choose this one or this one user so the name of the component is user so I get back to my project here and put a user which comes from the react Lucid here okay so now let's go to our browser here and as you can see the icon is now placed in our input element but as you can see when we are are going to input some text in the component the beginning of the text is overlapped with the icon element so we need to conditionally put some padding in our input elements so I go to the input component and here as you can see we have the CN function which is a combination of the Tailwind merge and the CLS X function so let's enable the wrap here and you can see all the Tailwind CSS classes here okay so as I said it uses the CN function in which we can use the conditional classes in an object so after the class name here we can use an object here and it's just like the clsx function so here we can say pl6 for padding left 6 okay if the icon element is available okay so if I go to the browser here you can see now the text doesn't overlap with the icon element okay and if I go to the homepage here and create another input element without any icon inside it okay and then then I go back to the browser you can see the input element doesn't have any icon inside it and the padding element is not applied because we are conditionally set the pl6 class name if we have an icon here so the CN function is really good utility that is install automatically by the chat CN UI so it has two objective here first if we have a conflict here with our T CSS classes for example let's say H6 here you can see we have a conflict here but to the end function only apply the second Edge class here and then we can add a conditional class object here and conditionally set our classes into our component so that's it for the input component and as a last thing in this video Let's create a toast component with shat CN U so I get back to the shat CN component section and let's scroll down for toast element here okay let's copy the installing the toast script here open up our terminal and let's create another terminal here okay paste it here okay it install a toast component here a toaster and use toast function so let's get back to the documentation here we need to go to the layout. TSX file and add this toaster component in the root layout of our application so I go to the root layout and here after the children going to paste it here and let's import it okay and let's get back to the documentation you can see we need to import the used toast okay so for example let's go to the homepage here and let's import the Ed toast here and then here we need to extract the toast function from the Ed toast so here in the homepage extract use to now we need to set it to use client here and then here in the unclick event of this button we can use that toast function so here let say unclick and then let's let's copy the toast here okay so now if I get back to my browser here and click on the test button you can see we have a tost here we can also change the variant of the toast element and for example let's say variant and use this variant here and if I click on the toast again you can see it now has a red background we can also add a custom variant to our toast element and that is the beauty of the chat CN UI so here I go to the to statistics file inside our components directory okay and as you can see here we have the variance object and now we can add another variant here for example let's say we want to add a success variant and now we can add our tail one CSS classes we want a border BG green 500 or 600 okay and then text white so let's save this and let's get back to our page component here and set its variant to the success as you can see it has a nice aut complete here let's save this and get back to my browser here and if I click on the button here you can see now our toast element has a green background so yeah as I said we can easily customize the chatsi and UI components and I think it is really a great feature for us so that's it for this video and if you like the video please hit the like button and if you haven't subscribed to my Channel please support me and subscribe subbe to my channnel for more updates okay have a nice time bye-bye

Channel: Sakura Dev

Views: 7,279

Keywords: nextjs14, nextjs, nextjs 14, next.js 14, nrxt.js14, server actions, vahid nejad

Id: MGk61nTaHn0

Length: 15min 33sec (933 seconds)

Published: Fri Nov 03 2023