I tried the 2 best UI libraries. Here's my experience.

If you're looking to build a big project, you're probably going to need a UI library. Why?

A UI library will not only save you time by giving you pre-styled components, but it will make your website look more consistent, as all these components use the same color schema, and you don't have to manually specify any stylings each time you make a button.

When it comes to UI libraries there are many famous ones like MUI and ChakraUI, but one library that dominated in 2023 is Shadcn.

It's not a "library", it's a set of components built on top of Radix that you download their source code in your project.

This gives you control over the entire code and you can make any modifications that you want.

In terms of their components, shadcn has a great set of UI components like buttons, tables, checkboxes, etc...

And for me, it was perfect. I never had any issues with it, and all the components that I needed were there.

Until I heard about NextUI, it looked promising and I had to give it a try.

And when I checked their website, I was blown away.

Not only did they have pretty much all the components that shadcn has, but because nextUI uses framer motion, everything was animated and looked so clean.

Comparing components

I'm gonna compare a few components to see what I'm talking about.

Buttons

Shadcn offers a simple button that looks good, but nextUI offers a button that looks much more professional.

As you can see when I click the shadcn button, nothing happens, but when I click the NextUI button, it shrinks and grows back when I release + there's a ripple effect that looks so clean.

Inputs

An issue that I always faced when using inputs is the placeholder.

I want something to indicate what this input is for, so I have 2 options.

Either a label above the input bar or a placeholder.

The label looks ugly and takes up unnecessary space, so I'd always go with the placeholder.

The issue with the placeholder is that as soon as you start typing, it disappears.

And if you have a big form with many inputs, users might forget what each input is for.

NextUI solved this problem with a simple, but brilliant idea.

They have a placeholder, but when you start typing, it doesn't disappear, instead, it shrinks and stays at the corner inside the input bar.

The shrink animation is so smooth and clean that I can't go back to using regular placeholders.

Checkbox

Shandcn offers a simple checkbox without anything special, but because nextUI uses framer motion, the checkmark path is animated instead of just showing.

Pagination

Shadcn recently released a pagination component that looks very basic, nothing too crazy.

On the other hand, NextUI has the best pagination component I've seen so far.

The animations, transitions, and the way the number of pages is truncated, are perfect out of the box.

Skeletons

Shadcn offers a simple skeleton that can be easily built manually using animate-pulse .

NextUI has a modern and much better-looking skeleton similar to the one used by Vercel.

Others

The following are some components that come with NextUI only, I wanted to share them because they're beautiful.

Image

NextUI offers a very beautiful image component with a built-in skeleton that shows until the image is loaded.

This greatly enhances the user experience, and the best thing is that you can combine it with the Next Image component to benefit from the image optimization that it offers.

Spinner

I used to install react-spinners if I wanted to use a good-looking spinner, but not anymore.

NextUI has a very clean spinner with a nice trail going behind it.

Snippet

You probably won't need this component in every project, but in my case, I needed a way to let people copy emails and passwords for my password manager.

Not only did it save me the hassle of implementing the copy-to-clipboard feature manually, but it looks very nice, and it gives nice feedback when clicked letting the user know that he successfully copied the text.

Pros and cons

So far NextUI seems way better, it has better animations, and it has some very cool components that shadcn doesn't, but that doesn't mean that it's perfect. Everything has its pros and cons.

NextUI:

Pros:

- Better-looking components and animations.

- Easier to use.

- You write less code.

Cons:

- Heavier JS / CSS bundle.

- You don't have full control over the code like shadcn.

- You have to wrap your entire application in a client-provider ( NextUIProvider ) which is kinda weird.

Shadcn

Pros:

- Has some cool components that NextUI doesn't like the resizable and the drawer.

- You can see the full code of the components and create your own variants.

- More simple and lightweight components.

Cons:

- Some components look very basic.

- In some components, you have to write many lines of code whereas in NextUI you'd have to write half that number of lines.

- You have to install each component manually.

Conclusion

Overall for me, NextUI is the goto library, unless I need a component that is exclusive to shadcn like the drawer, then I'd install shadcn.