These 2 UI Libraries Are The Perfect Combo
HTML-код
- Опубликовано: 28 май 2024
- Shadcn-ui does a lot of stuff very, very well. For the parts that could be improved by animations, that is exactly where NextUI picks up and provides some beautiful alternatives. A really nice duo to get the best of both worlds.
-- my links
Next.js SaaS: www.splitter.gg/
Discord: / discord
GitHub: github.com/joschan21 
Наука
Shadcn UI uses tailwindcss-animate, rudimentary animations like transitions for feedback can be added to any element using the data attribute as trigger. Custom animations can also be added to tailwind by the developer. I think shadcn UI is made unopinionated so you as a developer can make it opinionated and remain lightweight. Next UI is great tho, their figma design system is extremely helpful
Exactly, that's why I think nextui comes in so handy if you're not a huge fan of those default implementations and dig some more elaborate animations. Big fan of both, could not imagine building projects without a ui library at this point tbh
hey can I use tailwind with next ui?
Thanks, that was quick and very informational comperation! I will for sure use both from now on
A great comparison would be building two exact projects using either of these to compare the performance difference, and then finally a project with Next UI, where shadcn UI lacks to bring out the best of both worlds :D.
Either way, thanks for introducing Next UI Josh!
Learnt about Next UI last week from Jack herrington and fell in love immediately, animations, styling feels amd looks pure class.
oh amazing! great to know you can mix and match both of them!
Josh thanks buddy you are making us notified with trend technologies for long time appreciate that bro
appreciate ya man. cheers!
next-ui for small project & shadcn-ui for larger project.
Size & performance matters!
haha I discovered NextUI yesterday when typing next-themes, fun to see a video on it!
Shadcn ui is the new bootstrap 🗿
Not really
It's only components with trigger 😅
I meant that its popularity and usage are growing rapidly, much like the early days of Bootstrap
Bootstrap is for noobs
@@PlasmaHarshMy noob is for your mom
finally a mention in nextui, ive been trying to use nextui when i started learning nextjs, i find it really hard to work and modify. shadcn gave me a good flexibility and been using it. but yes the animation is better
nexui was totally not intuitive for me. I hated every second of using it
I like them both. I just found out about next ui. And it is good. Also how do you make a interactive animation light bulb with a pull wire that can be pulled to turn the bulb on and off?
I think the checkbox animation would give great user experiences on mobile screens with smooth touch feedbacks.
Mui Joy is doing great. It is also giving nice UI templates.
Love your use of the word "beautiful" , improves my mood by x2 every time you say it 😅😉
hahaha cheers man
i want to know one thing, right now i am using styled-component/native for making my component library in react native app, but i am facing performance lag. what should be the ideal css framework for making component lib for react native app?
Is it possible or good practice to use both in a large scale project for a startup or saas ?
I just liked both as nextui provides a native feel and good animations and user experience, shadcn provides more useful components like carasoul and drawer.
I've been looking at using shadcn and something like tremor for more graph/chart heavy stuff but I'm not sure how to implement global styling without it being a headache to manage and scale
I’m thinking the exact same and equally unsure!!
these actually go great together. I'm using them both in my SaaS and tremor just expects you to add some stuff to your tailwind config, that's pretty much it. No conflicts between those two
Nice !!! How about anima-te ícone ? Like Resend using? Some alternatives ?
mixing together, beautiful
Very helpful, thank you 😁
Keep the NextUI content coming 😁
Am glad I don't have to pick one over the other as I like them both!
What's the extension you use to show the size of the imports? It looks pretty useful.
thank u for compare. it is very useful 🥳🥳🥳
Loving the NextUI
Hey bro , have you tried combining both Shadcdn and Nextui together in a same project ?
underrated video. thanks man
Hi Josh, big fan of your work. I actually tried to work with shadcn and nextui in the same project. But i had issues with the theme. You said both are completely safe to use side by side in a project but it leads to many design and color inconsistency. Can you make a video to setup shadcn and nextui in one project and control the theme from css styles just like shadcn themes. I would prefer Astro for video, but the implementation would be indentical on any framework, i suppose.
D'accord, a video with the setup would be very helpful,
Next ui is the best ui library for me
Shadcdn's Dropdown Menu removes the scrollbar of the page, making the unscrollable
It sucks
I need some framework agnostic UI libraries :/ its too much for react only, it locks the ecosystem. (Im using react by myself, but right now i will be working on svelte so that opens my eyes)
next-ui for sure, but also like shadcn.
Thanks josh for this information.
ayy cheers man, appreciate you
Could you make a project using 'nextui' please?
How about performance in mobile? That's the main question.
From the both, I prefer shadcn. But I‘m really interested what Adam W. is building with Tailwind Catalyst 😉
this is the first time I've heard of catalyst, looks promising
ngl, Adam, and TW, are great, but I'm not the biggest fan of his templates or his use of tailwind in them 😄 so I'm not sure if I should be excited or not...
I think i like this Next UI
Fancy doing some videos on testing with Jest, Cypress etc?
love your videos bro
very happy to hear that man!
great sharing, thank you
Not on the Shad train at the
moment honestly, I tried it in a playground project and I’m not a fan of the mountain of deps it adds to a project, and also I found customizing it to my web app’s design spec to be very hard and struggled to get the results I wanted. Maybe I’ll sit down with it some more and try to figure it out. Also gonna try React Aria, which I have high hopes for, this week in a playground. I mostly use UI libraries for dropdowns and modals and self-roll everything else these days.
I really like Mantine UI, many components, hooks. It very simple to use and customize. In v7 it will change from emotion to css module. I'm waiting for it to be officially released to use with next.
shadcn is also pretty cool for me, but it has few components
Looking at it now. Very slick.
Beta is out, all components have been transferred, works pretty good so far
@@outis99 Have you used the v7 beta in any projects? I really want to use the beta for my personal project but am afraid there will be many issues
Me too, for the meantime I'm leaning with NextUI if I want to use Tailwind and have ready made components with good animation ready. For a bigger project with a much more custom design and performance matters, shadcn is the go to. Mantine v7 on the other hand, can be paired with TW as well and has good ready components but still in beta so only good for hobby projects as of now.
Looks great. Thanks for sharing!
How can I use both in the same project? I have been using Next UI, then I installed ShadcnUI and overwrite my libs/utils.js script and my tailwind config, breaking all my styles
Same issue 😔
install them into to separate initial projects, then choose one project and join the packages and configuration file things that were added to the other one manually. Generally I'm not sure if it's a good way using 2 UI libraries in one project, but Shadcn might be the one you could try with.
@@-Jakob- thank you so much!
I am looking for next js can do something like Astro transition. The best ui with 3 lines of code…
Would using both of them not increase bundle size? Hence slowing app down?
Shadcn isn’t a package, it’s just tw components u can copy and paste into your project
@@kaycooking but radix is a package i guess
yes, and most shad-ui components extends radix-ui
The bundle size in a React project is primarily determined by the libraries and code you import and use in your application.
When you install a library using a package manager like npm or yarn, it adds the library and its dependencies to your project's node_modules folder. However, simply installing a library does not automatically increase your bundle size. The size of your bundle will increase when you actually import and use code from that library in your application.
When you import a module or component from a library in your JavaScript code, the bundler (such as Webpack, Rollup, or Parcel) includes that specific code in your bundle. This means that if you import only a small part of a large library, only the code related to what you've imported will be included in the bundle, not the entire library.
not really, at least not noticeable. The trade-off between performance and shipping speed by not worrying about UI is worth it a hundred times
Can someone explain to me how copy pasting shadcn components is "the new hype"? Since when do we want to copy paste components, now they are already stale and un-updatable. Please make it make sense to me. (Also so many components missing).
Its a lot easier to customize because all the code is just right there, styled version of the unstyled library their using
UI battle is endless. I think someone need to standarize Component name or class name. thanks to tailwind for starting it.
I hope we can just install "A", install "B" like how we install VSCode theme
could you do a vid combining these 2?
What is the extension that you use that shows you the size of the imports?
Just type in import cost on the extensions tab
yep it's called import cost
Hey bro any idea about react native UI library except of react native elements?
lately there's been a buzz for tamagui
tamagui is great but it comes with a steep learning curve.
nice video!
can u please, put the link on the decription
I wanted to try out next ui, mainly because, while I love shadcn, setting up/editing the color schemes is a huge pain. I really don't like the fact that to add a colour you need to do it both in the css vars and then later in tailwind config. I mean it makes sense based on how it works, but it's still a bit annoying ya know.
Also, I'm pretty sure you can in fact override the animation duration in some way, unless they specified it with the [] tailwind syntax for fixed value (which I doubt they would have done), and even then you can probably put duration-sm class on every component manually?
After checking with the code, you could probably (for checkbox at least) do
the great thing about colors in shadcn is that with the newly added themes, they're super easy to switch out once you've went through the initial setup and they look beautiful out of the box
Can we use both the libraries together?
Spartan is cool for angular!
Daisy UI Supremacy
my Navbar from nextUI crashed when I installed shadcnui
Using both in the same app is it a problem ?
Let me tell yoou what I think...
I think what you think :)
cons: "some stuff i am not a fan of" lol. fair enough
Basically Radix UI Vs React Aria
Shadcn-ui is support rtl ?
Great!!!!
Shadcn is cool only when you have design and time for customization. If you’re prototyping or don’t want to waste time for customizing, I would recommend MUI. Their components are really nice if you don’t mind of Emotion css (which sucks af)
Why not using SHADCN-UI with FRAMER-MOTION ?
what a bout preline ui ? i heard it is good
People who says next ui is better, try it on production! I lost a lot of time because on production on mobile next ui animation doesn’t work same as desktop. I hate it!
It would be so cool if NextUI gave you the actual underlying code because the animations are almost perfect.
Agree
They do give you the source which you can then take and edit (There is a link to the source on the top of every components documentation page along with links to the style source). Each component comes with a hook that can be used to create custom versions of the same component using the techniques used to create the actual root component. I started with shadcn and moved to nextui because it was prettier and I've created a few custom components off the hooks they've provided. Given it's all mostly built off react-aria you can leverage either the react-aria hooks or the components themselves as well.
rainbow kit too
Next ui vs framer motion
Isn't it a bit too heavy to have both?
Framer motion seems like overkill here...
only 50k subscriber more to 100k, not bad eh? 😃
NextUI is too expensive in performance but it's beatiful
Bruh, you forgot the most important factor that is the main difference between the two, Bundle size and client side JS.
ShadCN is not even considered as a component library, you don’t have to install anything, you just add some components code to your app, and this is what makes stand against all the traditional component libraries ✅
Shadcn most certainly installs things. Every component you add it adds the needed radix deps to your project. Similarly nextui you don't need to install the entire library you can just install the components you want.
43kb for a spinner 😂
I see next-ui few month ago, going better
Im still using bootstrap. Go on you'll can laugh.
😂😂😂 I learned bootstrap this year and thought it was legendary, I then met tailwind a couple months after and I was like bootstrap bye. It's still good though
Bootstrap is amazing, saves so much time and no config
I would say the nextUI is much better than shadcdn due to those animations because such animations makes the user experience much better and make your website more fluid and smooth.
NextUI ist ja mal mega sexy.
Next UI put a lot of work in to this but for my tastes it doesn't feel responsive enough. Too much animation.
I am a little bit in both worlds of these libraries. Yes. It saves you time. But for me, it is important to also build custom designs. And every time I do stumble upon sites that are done with "Bootstrap" - my heart just dies.
I am a developer as well, but the designer in me do not love these UI libraries at all. You certainly would need to use 3-5 different UI Libraries, to be able to cherry pick all the great benefits of them all. But from a developer view.. I want just to use one of course..
I do like that html/css evolves, so that accordions and modals can be done natively with html elements, and powering with css accordingly.
There are to many cons with every library.. Shadcn-UI wins. I can use it for all my forms - but then not give a shit about Divider, Scroll Shadow, Avatars and all bloat that for example NextUI has..
One thing to note is that NextUI supports installing the individual components. It does not require installing the entire library of components. Helps tremendously with performance since it would get rid of the larger js and css bundle.
Well said it’s like eating at a high end restaurant where they chefs are passionate and make their meals with love vs eating at a generic franchise that has optimized for speed .
I was trying to use Shadcn ui for my personal project but it seems like the new node update just made it worse :(
How so?
Huh? I think you may be mistaken..
@@user-sh5qp6uu1e there is a babel error while installing shadcn UI using npx shadcn-ui@latest init
I did update my Node version to v20 and I can't use shadcn with my project. So I downgrade it to v18 and it works
nextUi is great but poeple are sleepn on it honesty
Shadcn is quite lackluster compared to Mantine.
any fellow ChakraUI enjoyer? 🙃
that was one of my first ever ui libraries, really enjoyed it. Especially the button and loading states & how easy they were to use
I... still don't know why you'd use them together??? Surely you wouldn't pull in *another* UI library just to get slightly better animations on a few components? Just use next-ui then, no?
I don't know, I feel like for personal projects, Next UI is great, but for enterprise applications shadcn ftw.
Next UI is not clearly granted that it works with tailwind, they claim so but it doesn't seem like and it also feels material UI like to me which I don't want, though their components are realy neat!
NextUI v2 is built on top of TailwindCSS is the style engine, MaterialUI uses emotion a CSS-in-JS library, they are two different things
@@juniorgarcia3595 I know they're different and that next ui claims to be on tailwind, but I don't see any example in docs where theyre actually using tailwind to customize a next ui component, and how deep can one have control? ultimately I think what josh said is better, combine the two libs when working!
@@husseinkizz Actually it's pretty deep, we can change many things with tailwind, but sometimes you have to use classNames prop instead of className and Target a specific wrapper and it will change it.
We have almost 80-90% control in nextui.
@@jeevankarnati4281 ok but they should capitalize more on customization via classsName prop than the props api, people don't like it!
It just doensn't feel tailwindy!!!
That's really cool with next-ui. But recently, I've worked with a large project and it seems to be really low performance and lag. So I decide to change to shadcn and it gives me more comfortable and lightweight on my project. So please don't use next-ui for large project just because its animations.
Just in dev or in production too? I know next is a little slow in dev with app router.
@@michaelfrieze just in dev, but trying imagining a dev environment with superslow (next-ui with every its animation) and slow (shadcn with instance). I experienced and I found out the difference
@@tuankietyts next in dev is already pretty slow for me, but since it's just dev I don't mind too much.
Why use two design libraries? That's a mess.
I tested Next-UI in a big projet ! It's really horrible, lots of bugs and unexpected behavior
When was this?
@@null_spacex Around April 2023
Small animations are things I hate the most.
Typing...
Try daisyui
Dont select your UI library based on animation.
If not based on animations, what other differences are there between Shadcn and NextUI?
It's called a "UI" library for a reason.
@@SheikhAmeen exactly 😂
Well shadcn is good for ssr. on other hand next ui is not.
First
thanks nerd
youre welcome nerd
As a lead frontend dev, please think long and hard before you animate your ui components.
no nextui is zero
shadcn is better,
who needs delayed stupid/annoying animations?
The web isnt static html anymore. Almost every GOOD site uses some sort of animating. lol..
yea, but if you do it at the cost of usability its not worth it.
Ask your users that they think about your fancy animations if it gets in the way of getting things done.
Waiting for some visuals to complete before the button/input state changes is not a good tradeoff.@@Hashmojis
You don't need animations for everything, it gets distracting