These 2 UI Libraries Are The Perfect Combo

chat cnui is a very extensible UI library with no abstractions giving you full control of the style using Tailwind CSS on the other hand a tool called Next UI a completely separate Standalone UI Library surprisingly goes really well with that first UI Library the reason is they complement each other so well where one legs the other one comes ahead lifts it up and provides beautiful animations here's how so both of these have pros and cons and I'm not just saying that I literally mean it chatsy and UI is super easy to set up it just works out of the box next UI has a bit fancier animations and it shines at components that chat CN you know could do better both of these has cons as well and again I'm not just saying that chat cnui you need to install everything manually is that inherently a con maybe not because it's intended by the author it's supposed to be that way but for you as a developer it's a bit more work than in next UI where you just have to import everything from one single dependency and to be honest some stuff in chatsy and UI especially the radio what you're gonna see later I'm not a fan of I think it could look way better defense your animations in next UI come at a small cost though they look better than enchant cnui but they also have a separate animation library that is framer motion weighing your app down just a bit with that said let's get into the first example and we're gonna go from next to I is just a tad cleaner a tad looking better to later in the examples while there is actually a pretty big difference for the accordions there's not a huge difference with shad CN they all work the same but in next UI the text also slightly fades in once we open the accordion by default which is kind of a nice addition it's just a bit nicer it's a very small detail but I do prefer it over the chat CN implementation and you can see the different abstraction approach right here this is the Shad CN version there tends to be a bit more cold in here because there's less abstraction you have more control over the Styles in chat CN than you do in next UI it's a bit more abstract but also you need to write a bit less code for it that also reflects in the import statements by the way for next drive just import two things you're good to go and for chatsy and UI there are four things you need to import but you also have more control for it next up and I think this example is way more clear than the accordions where there was just a small difference take a look at this this is the chats and UI implementation as I click the check mark is just there that is instant feedback that is good but it could look a bit fancier right and next UI does just that take a look at this animation when I click it the thing pops up the icon is animated and it looks it looks pretty good the only thing I'm not a fan of is that the feedback is not instant it takes a small while and as far as I know you can't adjust the animation duration you can disable it so it works just like the shared cn1 but why even bother with next UI at that point the animations are the main points I prefer over chat CN it really is a different style so if you prefer clean animations instead of the direct feedback for users even though the ux might suffer a tiny bit from that then next UI is really well suited for you one big difference I've noticed in the the progress bars or progress Spinners this is the chat CN version now this is not an official component from chatsy and UI this loader but it is an implementation I got from his work you can see that right here in the progress it's just a loader tool an icon we get from a icon library and that is with the animate spin it just works with Tailwind which makes the animation lighter and you can see the difference is pretty big actually whereas we just import one single icon if we import the circular progress from next UI or the spinner the Imports are much larger that is the main downside of next UI but they also tend to look a bit more advanced this one has a nice little Trail going behind it this one is going around in intervals and the last one I really want to show you because it's very cool it is like a built-in progress bar you can change the value and that is going to animate this thing right here it's going to animate beautifully and you can use it for even different stuff than just showing a loading spinner and the last one I want to show you is the radio there's a pretty big difference here just like with a checkbox right with chat cnui it's instant it just works but there's no animation involved whatsoever that makes again your app lighter and faster and ux feedback more direct with next UI there are definitely fancier animations take a look at this the outline is instant so the ux doesn't suffer at all and then the small dot in the middle is beautifully animated in once you click on a radio item now which one is better I'm not gonna tell you you be the judge do you prefer small little animations and accept that your app is going to be just a very Tad slower from those even though to be honest it's probably not going to be noticeable or just direct feedback when the chat CN implementation so in conclusion I feel like the parts were shot at the end is not animated next UI picks up beautifully you can use these two together seamlessly both rely on tailwind and I went through the pros and cons one has a bit more abstraction one has a bit less it really depends on what you prefer but using these both together I think is a really powerful combination let me know what you think Down Below in the comments I love to hear your thoughts and then I'm gonna see you in the next video have a good one and bye bye

Channel: Josh tried coding

Views: 103,401

Keywords: nextui, next ui, ui library, shadcn ui, shadcn-ui, ui.shadcn.com, josh tried coding, josh tried coding ui, josh tried coding ui library, joshtriedcoding, typescript, react, comparison

Id: 48qgz7utECQ

Length: 5min 2sec (302 seconds)

Published: Thu Sep 07 2023