shadcn/ui is great! But what if...

Shadcn/ui is great, components are good-looking, easy to setup and customize, and everyone likes it… BUT, as everything, it has some downsides.
Most of the reviews are 100% positive, but I think it’s also worth mentioning what are the tradeoffs in order to make an informed decision before adopting a tool.
After using it for a few months, these are my thoughts.
_______________________________
Support my work: github.com/spo...
Hit like and subscribe for more content! :D
Beginner-Friendly Open Source Projects: github.com/Dev...
Join the Discord community! Here's the invite: / discord
You can also follow me on the other platforms:
Twitter: / balastrong
dev.to: dev.to/balastrong
GitHub: github.com/Bal...
Home: leonardomontin...
TikTok: / balastrong
Instagram: / devbalastrong
#shadcn #react

[@k-yo]

When libraries don't have the behaviour or style I want, it is also my problem to struggle customizing it to my needs. With shadcn I can change its source for customizing AND fixing bugs quick. Also, making wrapper components around its UI components, instead of always changing the source makes it easier to handle diff changes from new versions pulled. That is something that I would also recommend for more traditional UI libraries, because in the future when you want to change to another for whatever reason, you update only the wrapper components. Basically, build your own proto design system and have your future self thank you.

[@kieronwiltshire1701]

If you have an issue with a component, you can literally re-install the component via the cli, get the latest version and boom, you're good.

[@dziamid]

Unless you've modified the code and boom your modifications are gone. And if you haven't - then what's the point of having the source code in your repo anyway?

[@kieronwiltshire1701]

@@dziamid if you have an issue with a component you’ve modified, and you can’t fix it yourself that’s a skill issue bro

[@illker.]

@@kieronwiltshire1701 agreed

[@GatoNordico]

I think it depends on who’s the intended user. I would say shadcn is a great starting point for someone who wants to have the flexibility to modify their ui components. And as you highlighted this flexibility comes with a cost, which in this case is not monetary…

[@austincodes]

If there is a problem with shadcn you can make a pull request. If you are using MUI are forced to fix a bunch of random breaking changes because you wanted a newer version for a single component or bug fix. MUI and things it are terrible

[@trangcongthanh]

0:42 The ownership of the code is the best feature of shadcn/ui. I rather try to resolve the problem by myself than create issue, wait author/contributor verify the issue, fix it, then release it. I even created the PR to fix the bug, but it never got merge. Or got merge but never released. In the end of the day, I need to maintain a fork of the library by myself. Is it less work compare to maintain shadcn/ui components? 2:48 You can config the tsserver to ignore some pattern from auto/suggest import ("typescript.preferences.autoImportFileExcludePatterns": []) Yes, upgrade deps for long run project is always a pain.

[@angstrom1058]

"Dependency Hell" Thanks for pointing this out.

[@cb73]

There are downsides but… compared to what?

[@s_the_first]

"if your component has a problem, it is... YOUR problem". Lol. You are correct. But this is a good thing. Funny tho...

[@hubcio2115]

The aforementioned arguments are valid, but imo they're just small caveats. One point about big codebases is a good thing to consider but shadcn is still better then a component library. What you trade off with shad you'll pay when fighting against a library or hacking it to do something that it was not designed to do.

[@DevLeonardo]

Yeah, I agree with that. There are some tradeoff like everything but so far it seems they're better than the ones with other libraries/approaches.

[@austincodes]

It sucks when a library takes you 90% of the way there to your solution. Then the last 10% is hell because you have to hack it into doing something it wasn't designed for. Breaking changes and updates are also a pain. I'd so much rather own my code

[@bnssoftware3292]

​@@austincodesTHIS! This is almost ALWAYS the case with third party libraries, paid or not. Always look great in the provided examples, but always fall short when actually trying to use them.

[@dziamid]

With Tailwind team all in on catalyst could be that the hype of owning UI component codebase is here to stay..

[@MrPkmonster]

Hello, could your suggest alternative library instead of shadcn ? Thank you

[@xxxxxxxxxxxxxxxxxxxxxxxxx981]

nextui is good and it's an actual library. it has a premium side, but it's optional

[@SirJagerYT]

DaisyUI

[@sid06]

Thanks for mentioning this, it has been very valuable for making my decision (I will stick with JoyUI).

[@chirkov]

You spend 8 minutes talking about the only bug in the shadcn. Every library has bugs. Shadcn and radix are written beautifully

[@RafaelBelvederese]

so he shouldn't talk about it, just because it's written beautifully? how can shadcn be improved without criticism?

[@nasko235679]

A lot of the components (or primitives whatever) also don't work together. Let's say you want to insert a DropdownMenu inside a NavigationMenu. Everything spazzes out and the component starts getting rerendered constantly. Yeah, it can be annoying and time-consuming to write your own components but after spending days trying to stitch up a dropdown multi-nested navigation from shadCN components and failing, I'd say I would've been better off doing it from scratch.

[@dziamid]

Did you build from scratch in the end? Have you considered using radix primitives instead?

[@nasko235679]

@@dziamid Radix primitives seem to work better, in one case I managed to make shadCN work, in another case I simply made the dropdown menu myself. But I think the issue with shadcn in general is that if you're trying to nest the same component inside itself they probably have their state variables named the same, so it's got 1 source for state and whenever you "open" one menu the other closes as it's changing the previous state.

[@smithrockford-dv1nb]

The problem is that all other libraries (MUI, next-ui, etc) all look bad by comparison. Vercel has mastered the look, and shadcn/ui is the only one that looks close.

[@salamandr4111]

nextui looks great imo

[@viciousattackvideo]

Eh top examples I’ve seen look borderline brutal but willing to see more

[@emmanuelxs6143]

I think we can come up with a solution

[@rchuhk100]

Very helpful video! Thank you.

[@marcelomagalhaes4508]

First, if you can't fix component bugs, you shouldn't use shadcn. PERIOD. Go learn more and then use it

[@wadoudazer6906]

What about solution , i hate the way chakra material and mantine works with classic css or css in js (emotion) i really like tailwind

[@jamiuadeleye]

Tailwind also works well with mantine.

[@Abioticodin2387]

You can use Mantine with Tailwind when you use it as a headless UI

[@clickadelic7681]

All the examples you copy - you forget / don't show to run the CLI / install command before. That's why they are bugged in your video. IMO not a full / correct demonstration on how to use it.

[@sourabhsingh4515]

the developer of shadcn must be his classmate that's why he is just telling us what we already know and we don't care about those things 🤣🤣

[@hakuna_matata_hakuna]

am now afraid of updaing the depndancies because all the radix ones wil update and something will bvreak . parkui better imo snec they only use ark ui which they also maintain , it also workswith solid ans sveltte

[@anthonydattolo6297]

Can’t use it on react native

[@isenewotheophilus6485]

My take on your video: It's BS