dev-resources.site
for different kinds of informations.
What I DON'T like about shadcn/ui
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.
So, after using it for a few months, I recorded a video sharing my thoughts.
What you're reading here is the script of the video, however some examples are better shown in the video than explained. I'll try to add some screenshots!
First of all, this is NOT a component library, itās clearly written in the homepage but Iām afraid not everyone is going to read it.
What does that mean? When you take a component from shadcn/ui, from that moment it becomes YOUR component. If thereās a problem, well, itās YOUR problem.
Unlike the other UI libraries weāre used to deal with where bugs are fixed with npm update, this is not exactly the case with shadcn.
Look ad this dropdown, I copy paste from the docs and it doesnāt work, and you know what, I have to fix it manually on my project. Weāll get on that later.
In general the components areā¦ basic. Wich makes sense, itās not a huge library like MUI or Prime with advanced components, itās not an UI library at all, but when deciding if you want to use shad, you must be aware of that. Lot of people claiming itās the best ui library so far, often forget to mention this.
Most of the components are simply customizations of headless components coming from another great library that is Radix-ui. Letās talk about that.
The first issue iāve got with radix isā¦ not a big one, but I want to mention it. When importing components, it always comes as first suggestion but if you import if from there and you look at your application, it obviously doesnāt work.
But maybe this can be easily solved with some settings on vscode. Let me know!
Since a lot of components are built on top of radix, what happens if radix has a bug? The easy answer is that you can simply update it and the bug is gone, but then what if something else breaks on shad because of the radix update?
Maybe itās not gonna happen that often, but as mentioned, if thereās a bug, itās your problem.
Speaking of bugs, letās get back at the broken combobox, I cannot click on the options and this is the component copy pasted from the docs, how is that possible?
By looking at this open GitHub issue, a breaking change on cmdk, another library shad relies on, also broke the shadcn Combobox component.
Besides, some components are seen as disabled some other are directly throwing an error and are unusable.
In this case it seems that the fix fix is to:
- Wrap all
<CommandItem>
inside<CommandList>
- Change a couple tailwind classes from
[data-disabled]
to[data-disabled='true']
With that, everything is back to work, but we donāt have any guarantee that bugs in the future will always be that easy to fix.
Maybe Iām wrong, but I have the feeling that on the long run this dependency situation might backfire, basically forcing shadcn users to fix the bugs themselves each time they occur, like this one.
Or maybe since the community is big, it will be as easy as searching through the open issues. Or even better, like breaking changes in other libraries there will be a list somewhere with all the known bugs and solutions.
I donāt know, letās see how it will evolve.
In general, Iām quite happy with shadcn/ui so far, but I also think the downsides have to be clear.
Instead of chasing the hype, you should try to make an informed decision before adopting a new shiny tool. But how is your experience with shadcn going? Let me know in the comments and speaking of hype, let me recommend you this video.
Thanks for watching, bye!
Thanks for reading this article, I hope you found it interesting!
I recently launched a GitHub Community! We create Open Source projects with the goal of learning Web Development together!
Join us: https://github.com/DevLeonardoCommunity
Do you like my content? You might consider subscribing to my YouTube channel! It means a lot to me ā¤ļø
You can find it here:
Feel free to follow me to get notified when new articles are out ;)
Featured ones: