The GOAT of React UI Libraries

have you ever been through this debate of like choosing the right UI library and which one is actually going to suit your needs there's tons of them from like in design to shacker UI out there to muui Gramm Elemental UI Evergreen well in this particular video you're going to see a brand new ey library that actually brings everything to the table everything you need with a really really awesome design and awesome user experience that was literally blowing on Twitter lately and verel themselves actually love that Library so if you are a react developer you're probably aware that there are hundreds or maybe two many reacts UI component libraries and sometimes when you try to learn something new or try to build a new projects and you try to for example go through the many different UI libraries that are out there for example in design Checker UI mui grommet Elemental UI Evergreen um what is this the react strap Bell all of those and literally more those are just like a handful ones but there's actually literally a lot of them out there on gith Hop if you just do the right search well I mean have you ever found the right one I mean just just for me I never found the exact right one that just going to make me absolutely super kind of like productive and customize everything to my needs plus I still use the library still helps me a lot the also part about this actually allows me to create stuff quickly well we're talking about bread xui so if you have been on Twitter for the past couple of I don't know weeks months you probably have heard about redxi or red xui sorry and how much impact it made on the react community and UI community in general and how simple and easy to customize and super like unstyled accessible open-source react primitive UI component library and when we talk about redex UI we immediately talk about the shat cnii that actually made a lot of impacts on the react Community lately and particularly on the nextjs community I mean if you look at this library in here just look the preview and the components already in here you can immediately tell that oh wait a second this is this is vel's kind of UI design system it's pretty much a lot familiar with that and it's pretty simple pretty nice and it's super super easy to use and customize plus it comes with a brand new idea like it's not it's not like the traditional UI component Library where you just like mpm install it and you can use the components out of the box it's completely different this one is more of like a copy pasting your own component and customizing it however you want and the relationship about shaten UI and redex UI is because like shaten uses redex behind the scenes to build its component and actually make it style because redex as we've talked about it before in here redex is unstyled so you get like components that are super unstyled and you can style them however you want and of course they provide you with themes in here if you ever want to style them or use a different kind of theme for each component you can easily do that with the themes provider so if you jump to Primitives in here and go to get started it's going to take us to the documentation and if you look closer into the documentation in here to read the actual vision of why they made this new UI Library versus the rest of your libraries the most important part is like the documented by the W AI area and this technically just stands for the web accessibility Initiative for accessible reach inter internet applications I know the name is a little weird but this document here is made by the W3 for basically like putting guidelines and best practices on how to build the perfect UI components for usability easy to use best user experience and of course easy to customize and work with and of course the best one for those actually R UI actually implements those practices the right way so inside of the website here you're going to find all the pattern for particularly building every single UI component from like alerts to accordion break Crum uh buttons carousals and so much more like feed grid list boxes and all of those actually for example if you click on the link one in here it's going to give you like exactly what the pattern what is like the best way to build that one for example keyboard interactions to the state and properties that you need to H to have you know to build the best UI component out there for a link to like an example in here you can look at and everything and likely for us fredu actually implements all of those the right way so that's actually one big reason why a lot of people and developers are super interested in rad xui the other really good reason for me as well that I really liked and I found a lot of shitty people on Twitter actually going through this one is actually the ability to only install the components you need instead of just installing the bunch of components for example other any other like react component library for example chra UI or end design if you go to the getting started in here and you go to um I don't know components or overview I want I wanted to install that one yeah so right here you go to mpo install andd and just this literally just going to install all the components for you like every single component and design is going to be installed for you so you can import them classic stuff for any component library but red X comes with a completely different idea where you can install that particular component instead of installing the all the components inside of the library if you ever need just one component you can just go through here do MBM install red xui install react accordion that's it and this is going to install for you just the reactor according you can use it easily and that's simple as that you don't need to actually install all of those only install what you need and actually use what you need and what I like about this one is for example is for example this hover card in here when you hover over like an image or a button it gives you a cool looking card like a Twitter card here it gives you as well like the ability to use either Tailwind stitches or css and in fact actually going to give you the exact like for for example the boil prate or the code snippet that you can copy with a t configuration you need in here for example for animation Fad in animation everything you need you can just copy paste it and start working with it now let's talk a little bit about the shaten UI so if you see here shaten is actually a beautifully designed component that you can copy paste and you need to do two lines under lines inside of like the copypaste part into your application it's accessible customizable and open source and these are very important but the most important part is the copy pasting part now for a quick preview this is actually what it would look like if you use the components this actually where the component like for example a search bar a calendar like range selection a button in here for example for downloaded cards uh tabs in here different tabs for example uh for like a selection menu in here or a combo box uh tabs in here as well sharts maybe tables you see in here if you just look closely into those they are pretty simple pretty pretty nice looking and I really love this like dark theme Plus they also have the light theme in here if you ever want to but I don't think anybody would want a light theme anymore so I I'm a big fan of Dark theme in here they're just super nice and it looks super super good and as far as I can tell and as far as I know this the shatti and UI you see in here or here particularly was completely like inspired by the versal design system but in here this actually we on vero.com and it's cly the design system in here as a lot similar to the shaten so it was like highly inspired by that because the Verso has one of the best uis out there for like you know accessibility usability and how you can easily use that one so this it was it was hugely inspired by that and in fact the CEO of and in fact vel's CEO himself actually made a statement on his Twitter account for how cool the shat C nuui was actually is and and the library itself in general and how cool it is and actually how people started to use that and how people started to ship new apps actually faster thanks to the shetu and UI ever seen before particularly in Vero and with nextjs so let's try to get started with shadan and see how you can actually install it and use the components and all the configuration needed and how it actually works without actually installed through mpm and what do we mean by copy pasting so first things first let's go through like getting started and here in the introduction actually they States everything you need to know about the library and how is it like copy pasted instead of like installing through mpm I like what you particularly mean by not a component library in this case and you know all the information here I really recommend you guys go through and actually read through this everything because really is good and it just gives you all the idea you basically need so we go through inst solution in here it's going to tell you oh what framework is supports a lot of them of course for us it's going to be next GS because we're react lovers so next GS and here your first news to actually create your next year like projects and make sure to use tailwind and types crate because those are the best and particularly make sure you use tawin because like shaten relies on the tawin stuff so make sure you do that then you actually going to go through and actually run the shaten UI CLI and this is one of the most important parts I'm just going to go copy I'm going to use pmpm you can use your or mpm so I'm going to head over back here click bmpm Shi Nui and knit and it's actually going to start the initialization for us of course you're going to grab everything from like you know the registry and try to create some configuration T configuration and replace everything you need and it's going to actually start asking you would you like to use typescript yes um would you like to use default or the New York star because there's actually two different styles I'm going to stick with the default it looks pretty good and here you actually use the base color theme with slate gray zinc neutral or stone um yeah I can just go through with gray here I think it's pretty good now you actually tell it where your global. CSS is and if you go to like public or I think mine is in the up yeah so up . global. CSS by default it actually recognizes that would you like to use CS variables yes Tailwind config located yes it's actually in in the root folder so I'm going to put that one in here and you're going to configure the import alas for components going to leave it compon or like ads for/ components and Utilities in here it's going to create a new folder for us going to put some utilities that can actually need to use like for merging classes and merging T classes and stuff so I'm going to choose that location and I might use an actually server components yes of course because I'm using the new OP directory and it's going to finally write the configuration we put in here into like components. Json so I'm going to just hit yes it's going to start the initialization it's going to create everything for us and there you go so actually in the two in confing in here you're going to find everything from like the colors uh the CSS variables in here if you head over to global. CSS you're going to find all the CSS variables in have been put together to actually form the actual theme you're going to be using and inside of component. Json you're going to find find your component configuration and just like this you're actually good to go you have that configured if you head over down a little bit in here you going to actually explain to you the folder structure that he uses by default you can change that of course but by default it puts component folder inside of it it puts the Primitive sort of like component that it uses those components actually the shaten components so whenever you copy paste or actually use a CLI to grab this component it's going to be by default put inside of like components for/ UI folder and other components in you need for example main navigation or like composite component not base component they're going to be put inside of the root components folder and last B in here you're going to have of course a live folder in here that has all the utility classes inside of utils do typescript and that's it the final part to add any component from the components that are available in here from like accordion alerts calendar button anything it just use this command in here MPX chats UI you do add and you specify which component you want to add in here of course you can copy the command I'm going to copy it to to pmpm so we got head over back over here let me just just extract this one pmpm like add button so it's going to ask you oh do you want to proceed and actually install the components with this dependency it's going to install the button and if you notice in here on the like left hand side inside of components UI folder you're going to find a new file that was added see in here that's what I mean by copy pasting it's like copy pasting that button from the shat CN UI like library right into your projects now the button component here be comes part of your project it's it doesn't exist inside of the node modules it's not like a library that was inside of installed like inside of a node modules that you need to update rather than not it actually is a file as part of the project and you can customize it you can change whatever you want to do in here like a normal like UI component here like a normal react component particularly that has some like variant in here using tailwind and if you just go down in here like extends th reacts burn HTML like attributes and it does something logic in here for the rendering part and of course if you notice this behind the scenes or under the hood uses the red xui and clearing is actually what is using to build the actual component now of course if you go to documentation here we can look at the bottom here we see like you know different styles of the button from like the New York style to the default style like how you install it as we did before and the usage of the button in here and the different stuff that you can use for example there's actually another variant of the button if using a link and you actually gives you a different examples in here to run through like the variant like the secondary destructive outline ghost link like an actual Link in here with an icon or like an icon and a text in here or the LA like loading State and literally the same thing happens for every every single old component for example for the calendar if you go to the calendar and if you go down here you're going to find like the usage how to use it you can copy the code of course and literally the same thing works for every single other component now this way you don't need to install all the component you already copy paste each component whenever you need it and it actually becomes part of your project so you can commit the component or commit the changes you made to the component with the rest of the code base and customize it whoever you want change colors change behaviors add into it remove some functionalities from it like you can literally do whatever you want from it it's just like a template you start from and you can build up on top of it which is what made the shetsen UI actually blew up recently and a lot of people started using it and plus the UI components in here are super super nice so I tried to pick up chatsi and UI and actually build a small dashboard in here that is looking super nice actually in front of you in here SC to say the dashboard looks super super amazing you've got like a bunch of cards in here you can actually you know have some info on like active users sales subscriptions uh for example here an overview in here with a really nice chart that actually is super animated and works really well and for example for this one is actually a table that actually list all the invoices that you have paid or not uh status in here and stuff like that and I actually literally built that one in in more of like 10 minutes 15 minutes I was able to build this and put this dashboard together using this chat c and UI because it was super simple and it all it had to do is actually copy paste some components and it was just literally there and for example added this like tabs where you can see overview sales maybe reports notifications uh for example for the sales in here it actually tells you or gives you a chart of different sales and the recent invoices or recent sales from different people in here like Olivia Martin or like Nadia in here or John as you can see the UI looks pretty incredible plus I was able to put the code in in a really short amount of time so this is actually the page this is the dashboard page. TSX and literally this is the page I was just able to go through actually every single component here like import the component for example the card I imported the card stuff in here botton the image in here from nextjs like custom component for example with serus chart for example it's outside of the UI in here so it's not a primitive base component but it's more of like a composite component that actually renders the sales chart but I really really like the flexibility that chassan actually gives you and how you can easily build that and plus since he uses redx UI everything is super primitive and super easy and you can customize it however you want you can like literally go inside of the UI in here go inside for example the calendar component you can customize like how it looks in here using this Twi class or the different variants or the day picker in here from the react dat picker everything is well put together so for example let's say we want to add like the customers a new tab in here and that tab is actually just for seeing the new customers that are actually coming and through the dashboard and just see analystics about these new customers for our business so if you go back in here go to the page. TSX and this actually literally the main uh page for the dashboard so I can go through um I think there is this uh where is it so if I go down in here if like this is report notifications this actually the tabs so it's clearly in here tabs then tabs list so here I can rename this to like uh customers and I can remove this from disabled I can literally just remove this and make this customers as well and there's this uh tabs contents for each tab so I can just go a little up in here this's actually the sales tab I'm going to go down in here I'm going to put in new tabs content for a different tab which is going to be the customer tab I put the value in here for customers so he knows exactly which tab this one actually belongs to and here for example you can do oh um customers oh this is actually the I think this is literally the sales chart so I can go inside of the sales chart in here for example let's say want to have like a bar chart for showing the number of customers that were incoming in the past I don't know year or maybe a couple of months or something like that so I can go through a component in here outside the VII that's actually a little better because there actually a composite component I can put uh for example recent or recent customers and I can do index. TSX I can um yeah I can do this like the recent customers for example the sales chart so I can rename this to recent customers and I can remove that now I can remove this because this the line chart I don't need the line chart anymore I want to use the bar chart I have this this code commented in here for using with three charts which basically give you the you know the bar chart and it uses bar chart gives you some fake data in here um and uses the recharts of course and right over here we're just putting some x-axis and Y AIS now back to the page in here for the customers tab I can do um recent customers I can import that now if I go back in herey as quickly as that I can just refresh the page and here if we have a new tab so called custom as we click on it secy immediately just showcases that as see this chart here looks pretty nice with a really nice animation uh looks really really good as like just like 2 minutes or or less literally I was able to build that one and of course you can do a lot more if you just go to the Shi end in here and you choose for example like a dialogue let's say you want to have a dialogue for stuff in here just like an alar or something serly you can easily copy the dialogue in here by just going through either the code just to copy that particular example or first make sure to go through and actually install that one using the CLI of course or you can manually install one that one by just copy pasting this and it will be to easily just integrate that one without any issues and that's it this actually Shen with redx UI and what is actually the best react UI component library right now that you can actually need use and build components or pages and applications with super easily and super quickly so anyway guys thank you for watching hope you guys enjoyed and catch you hopefully in the next ones

Channel: CoderOne

Views: 41,626

Keywords: react, shadcn, shadcn ui, shadcn/ui, shadcn-ui, radix, radix ui, react shadcn, vercel shadcn, react shadcn ui, nextjs shadcn, react ui, react ui library, react components library, nextjs ui library, ui library, top ui library, components library, ui components, react ui components, react ui components library, top react library, react chakra ui, react ant design, react mui, react material ui, material ui, evergreen, react bootstrap, bootstrap ui library

Id: lQhzllnU6sE

Length: 19min 48sec (1188 seconds)

Published: Mon Sep 04 2023