These 2 UI Libraries Are The Perfect Combo

[@oliverquixchan]

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

[@joshtriedcoding]

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

[@alii2284]

hey can I use tailwind with next ui?

[@imthatguyhere]

@@alii2284 It's designed around tailwindcss, you need it infact!

[@manjotbenipal8776]

​@@alii2284 Yep as much as you want

[@cameronadams4366]

Love your use of the word "beautiful" , improves my mood by x2 every time you say it 😅😉

[@joshtriedcoding]

hahaha cheers man

[@ezwa]

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

[@h3nry_t122]

nexui was totally not intuitive for me. I hated every second of using it

[@miraclenerdkidchiki6249]

Learnt about Next UI last week from Jack herrington and fell in love immediately, animations, styling feels amd looks pure class.

[@ismoiljonabduqahhorov5825]

Josh thanks buddy you are making us notified with trend technologies for long time appreciate that bro

[@joshtriedcoding]

appreciate ya man. cheers!

[@nerdprogrammer69]

Mui Joy is doing great. It is also giving nice UI templates.

[@ishrathinaam6723]

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!

[@Tryhards-Space]

Thanks, that was quick and very informational comperation! I will for sure use both from now on

[@ahmedsamy9999]

Next ui is the best ui library for me

[@henriquematias1986]

oh amazing! great to know you can mix and match both of them!

[@truongkhanguyen6241]

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

[@cb73]

Looking at it now. Very slick.

[@outis99]

Beta is out, all components have been transferred, works pretty good so far

[@truongkhanguyen6241]

@@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

[@Saradomin65]

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.

[@jijojosein]

Looks great. Thanks for sharing!

[@marvinkr]

haha I discovered NextUI yesterday when typing next-themes, fun to see a video on it!

[@myxsys]

Am glad I don't have to pick one over the other as I like them both!

[@blaizeW]

Loving the NextUI

[@mextat]

From the both, I prefer shadcn. But I‘m really interested what Adam W. is building with Tailwind Catalyst 😉

[@joshtriedcoding]

this is the first time I've heard of catalyst, looks promising

[@nickwoodward819]

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...

[@tabdig]

next-ui for sure, but also like shadcn.

[@abhiramsatpute]

I think the checkbox animation would give great user experiences on mobile screens with smooth touch feedbacks.

[@yaaaayeet745]

Shadcn ui is the new bootstrap 🗿

[@REAZNx]

Not really

[@tuankietyts]

It's only components with trigger 😅

[@yaaaayeet745]

I meant that its popularity and usage are growing rapidly, much like the early days of Bootstrap

[@PlasmaHarsh]

Bootstrap is for noobs

[@andrewiglinski148]

@@PlasmaHarshMy noob is for your mom

[@MuraliManoharVarmaPemmadi]

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.

[@rigeltoth]

D'accord, a video with the setup would be very helpful,

[@Mirislomovmirjalol]

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!

[@luis96xd]

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

[@rigeltoth]

Same issue 😔

[@-Jakob-]

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.

[@luis96xd]

@@-Jakob- thank you so much!

[@carlosricardoziegler2650]

Nice !!! How about anima-te ícone ? Like Resend using? Some alternatives ?

[@onlycasual1]

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

[@latch909]

I’m thinking the exact same and equally unsure!!

[@joshtriedcoding]

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

[@owenwexler7214]

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.

[@ricoaw500]

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

[@eshw23]

Would using both of them not increase bundle size? Hence slowing app down?

[@kaycooking]

Shadcn isn’t a package, it’s just tw components u can copy and paste into your project

[@yaaaayeet745]

@@kaycooking but radix is a package i guess

[@James-the-elder]

yes, and most shad-ui components extends radix-ui

[@2006Pk]

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.

[@joshtriedcoding]

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

[@pyakz2906]

Shadcdn's Dropdown Menu removes the scrollbar of the page, making the unscrollable It sucks

[@berserker556]

Hey bro , have you tried combining both Shadcdn and Nextui together in a same project ?

[@zancrow_gaming]

Still shadCn. If I need transition and animation I will combine framer and my shadCn. That's the power of 100% flexibility anytime anyday

[@naranyala_dev]

mixing together, beautiful

[@PenguinjitsuX]

NextUI looks great but it feels a bit too mobile/iOS to me. The animations as you mentioned make the UX feel a bit too slow for me, and are almost overkill. There's another library called Mantine that I've used for a while, and in my opinion Mantine and Shadcn are the best ones. I'm highly considering moving completely over to Shadcn for future projects because being able to edit the source of components is amazing. With Mantine, you have to pass styles or just make customizations to the class names like any other library which sometimes feels cumbersome, although they have a great theming API. Shadcn using tailinwind is a huge bonus though as Mantine uses normal css styles.

[@BR-BelalRezk]

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.

[@codedusting]

How about performance in mobile? That's the main question.

[@basic-1337]

Shadcn is enjoyable for me, it great for customizing!

[@treyrader]

cons: "some stuff i am not a fan of" lol. fair enough

[@starverseofficial]

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?

[@faizanahmed9304]

Thanks josh for this information.

[@joshtriedcoding]

ayy cheers man, appreciate you

[@judevector]

I think i like this Next UI

[@santiagopuentep]

What's the extension you use to show the size of the imports? It looks pretty useful.

[@alii2284]

underrated video. thanks man

[@Disorrder]

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)

[@cahyadiam7116]

thank u for compare. it is very useful 🥳🥳🥳

[@FzsHotDogInDonut]

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?

[@smithrockford-dv1nb]

it should also be mentioned that one could add the animations themselves to shadcn

[@shraj340]

The cons point in shadcn ui that is (install everything manually) is very wrong you can just use --all to get all the dependencies installed at single run

[@helleye311]

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

[@joshtriedcoding]

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

[@matthewbeardsley7004]

Fancy doing some videos on testing with Jest, Cypress etc?

[@mmzzzmeemee]

could you do a vid combining these 2?

[@andy509]

love your videos bro

[@joshtriedcoding]

very happy to hear that man!

[@ForrestDevs]

Basically Radix UI Vs React Aria

[@ndukwechiagozie5436]

In my opinion though, since i haven't used next ui , i think ShadCn is better , if i need better transitions and animate add a bit of framer

[@ClintonMejía-p8f]

Could you make a project using 'nextui' please?

[@martinklasson1981]

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..

[@jonny555333]

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.

[@RatherBeCancelledThanHandled]

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 .

[@aymanalrifai]

Can you give me the name of the tool you’re using as a canvas ?

[@avirbd]

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).

[@xyangst]

Its a lot easier to customize because all the code is just right there, styled version of the unstyled library their using

[@Zagoorland]

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)

[@DrkSinn69]

Daisy UI Supremacy

[@SyntaxLexx]

Let me tell yoou what I think... I think what you think :)

[@salahiddinediouri280]

great sharing, thank you

[@jamessiebert764]

Very helpful, thank you 😁 Keep the NextUI content coming 😁

[@Chris-zt4ol]

It would be so cool if NextUI gave you the actual underlying code because the animations are almost perfect.

[@joshtriedcoding]

Agree

[@Theonlywaye]

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.

[@adel.dev.account]

Why not using SHADCN-UI with FRAMER-MOTION ?

[@chunkycheese73]

Spartan is cool for angular!

[@yassineel_ouazzani7242]

Using both in the same app is it a problem ?

[@AnkitKalirawana]

Can we use both the libraries together?

[@PyrexCelso]

What is the extension that you use that shows you the size of the imports?

[@null_spacex]

Just type in import cost on the extensions tab

[@joshtriedcoding]

yep it's called import cost

[@tomfancode]

I am looking for next js can do something like Astro transition. The best ui with 3 lines of code…

[@berserker556]

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.

[@JoelMiller-z1x]

my Navbar from nextUI crashed when I installed shadcnui

[@hamidoahmeidi2140]

Shadcn-ui is support rtl ?

[@supafast1314]

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 ✅

[@Theonlywaye]

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.

[@harveerSingh-iy9xz]

Hey bro any idea about react native UI library except of react native elements?

[@dreamsachiever212]

lately there's been a buzz for tamagui

[@rishabh1S]

tamagui is great but it comes with a steep learning curve.

[@cb73]

Next UI put a lot of work in to this but for my tastes it doesn't feel responsive enough. Too much animation.

[@bptmhalim]

can u please, put the link on the decription

[@craigcaski]

Framer motion seems like overkill here...

[@tuankietyts]

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.

[@michaelfrieze]

Just in dev or in production too? I know next is a little slow in dev with app router.

[@tuankietyts]

@@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

[@michaelfrieze]

@@tuankietyts next in dev is already pretty slow for me, but since it's just dev I don't mind too much.

[@mohammadhossein94]

what a bout preline ui ? i heard it is good

[@Monstermash355]

Isn't it a bit too heavy to have both?

[@kasper369]

Next ui vs framer motion

[@rubenvelasquez312]

NextUI is too expensive in performance but it's beatiful

[@R0ckyRocket]

nice video!

[@dibuzzz3920]

Im still using bootstrap. Go on you'll can laugh.

[@emmanuelgenga7421]

😂😂😂 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

[@PwrXenon]

Bootstrap is amazing, saves so much time and no config

[@nickwoodward819]

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?

[@rishabh1S]

I don't know, I feel like for personal projects, Next UI is great, but for enterprise applications shadcn ftw.

[@artyomtaranenko2267]

I see next-ui few month ago, going better

[@lakshaybhushan]

I was trying to use Shadcn ui for my personal project but it seems like the new node update just made it worse :(

[@MeonisRP]

How so?

[@null_spacex]

Huh? I think you may be mistaken..

[@lakshaybhushan]

@@MeonisRP there is a babel error while installing shadcn UI using npx shadcn-ui@latest init

[@tuankietyts]

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

[@sine_tempore]

Shadcn is quite lackluster compared to Mantine.

[@tanmaysankpal2335]

Great!!!!

[@iqbalramadhan9315]

any fellow ChakraUI enjoyer? 🙃

[@joshtriedcoding]

that was one of my first ever ui libraries, really enjoyed it. Especially the button and loading states & how easy they were to use

[@breakinggood-r2v]

rainbow kit too

[@abdirahmann]

only 50k subscriber more to 100k, not bad eh? 😃

[@ofttrading]

nextUi is great but poeple are sleepn on it honesty

[@aleksd286]

Why use two design libraries? That's a mess.

[@martapfahl940]

NextUI ist ja mal mega sexy.

[@scottzeta3067]

Small animations are things I hate the most.

[@ryangamv8]

43kb for a spinner 😂

[@husseinkizz]

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!

[@juniorgarcia3595]

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

[@husseinkizz]

@@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!

[@jeevankarnati4281]

​@@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.

[@husseinkizz]

@@jeevankarnati4281 ok but they should capitalize more on customization via classsName prop than the props api, people don't like it!

[@husseinkizz]

It just doensn't feel tailwindy!!!

[@yanisoulhaci3369]

I tested Next-UI in a big projet ! It's really horrible, lots of bugs and unexpected behavior

[@null_spacex]

When was this?

[@yanisoulhaci3369]

@@null_spacex Around April 2023

[@ahmadmujtaba5050]

Typing...

[@code_react]

Well shadcn is good for ssr. on other hand next ui is not.

[@Pedram-cy3wu]

Try daisyui