This UI Library is NEXT LEVEL (New Update!)

okay hands down this UI library is just Next Level here's what you see in the new update they released just yesterday and if this is not the easiest way to switch out colors in your app you have ever seen I don't know what is if you don't know what this library is it's called chat cnui it's a copy and paste library that means you grab the components as code from the website and paste them into your app as they are and the main benefit of that is that the logic and styles of the components are 100 in your hand you control everything it's not abstracted away from you and this right here is how it got better because you use a drag and drop mechanism you can see all the styles that we're using for example in this button component BG Dash primary tax Dash primary Dash foreground these are not any default colors that Tailwind brings with it but instead if you go into our globals.css this right here is where we configure all those colors this also comes from chat cnui and the cool thing is all components like the button but many others that we use across our application like certain text right here the link this right here the button up here all the components that come from this UI Library use the same Central colors from the globals.css and that allows us to really easily switch them out and because they're Central and so easy to change we can just select any color that we like for our application and we can click the customize button right here and we can choose between the colors select certain border radiuses that match or app switch between light and dark mode so we can take a look at how this will look in our app with light and dark mode and then just click copy code we can click the copy button up here paste it into our globals.css and just by doing that we have successfully replaced all the Styles throughout our entire application if I reload this page I'm locally hosting it you'll see all the components not just on this page but across the entire application change their theme and it's not only the superficial appearance right if I tab over this you can see the outline is now in the same color it just beautifully matches by default we don't have to worry about anything so if I just sign into my app and navigate over to the dashboard you're going to see the same styles are played throughout the entire application also in the dashboard if we have a button here an input here it just looks beautiful out of the box and it's super easy with these colors to switch and there's a bunch of example components in here as well like a chat for example that you can just try out the colors for and see how they might look in your app wow that's pretty cool do you remember the old bootstrap days when everything just kind of looked like bootstrap well this is a really nice step in the right direction of preventing that from happening if everyone uses the same UI library because many people are using it already I hope you enjoyed this update as much as the video I'm gonna see in the next one have a good one and bye bye

Channel: Josh tried coding

Views: 144,071

Keywords: shadcnui, shadcn ui, ui library, react, nextjs, update, tutorial, josh tried coding, joshtriedcoding

Id: dD1fpoGHuC8

Length: 2min 53sec (173 seconds)

Published: Tue Aug 08 2023