Not a boring application, a very large application -- each major version update was a tedious process because they completely upended many APIs.
We've migrated to shadcn, and upgrades are now easy; we can upgrade a single component -- add the new ones free.
With MaterialUI we had to update EVERYTHING to their new APIs to be able to take advantage of the new features anywhere.
With shadcn we can be selective.
There were a couple of rough migrations though.
Grabbing an off-the-shelf UI library is easy in the short term, but it’s usually overcomplicated, implements things I won’t ever need, is hard to tweak if/when you want to distinguish your app from the thousand others using the same library, and when you do decide to upgrade it, all your tweaks break in subtle ways.
What I think would be the best approach is building your own UI library. You own it, you get to reuse it across different projects and maintain the same visual style (if desired), and you add features when you need them.
It's one more thing to maintain, and it's also difficult to push back on things. If you use off the shelf components it's much easier to say to designers and managers that a UX pattern is not available or not valid. You can point to the mature well known community owned UI library you use and make it authoritative. It's harder to do it if you build your own, suddenly each designer and developer is throwing things in there, adding features etc. It's also difficult to agree on the structure, so the components are well thought out, flexible, but also not so flexible to lose semantics. It's not an easy job, do you use slots, composition, rendering callbacks, there are too many decisions and you spend time building the UI library instead of actually shipping features.
It let's you copy in snapshots and change/edit/refine as you go. You own the UI kit the moment you copy it in. I see Shadcn 'upgrades' as nothing more than a stranger's PR to my UI kit, which usually means useless noise, unless there's a specific feature/bug that I need.
Ah, but it's rarely just that in many systems. It can only be just that if the component library does exactly what you want. Unfortunately, it happens quite often that component doesn't entirely do what's needed.
People bolt on extra CSS to the components all the time. Two lines of CSS is very tempting if the alternatives are a few hours of work at least. But those two lines need to be verified against every new feature of the component library.
Do those two line fixes a lot, and upgrading becomes A Project.
With shadcn / the copy paste format, you’ll almost never see that happen. The button shadcn provides for example is just css / tailwind. And if you did ever for some reason want to bring in a dependency for your button component you wouldn’t have to consider its effect on your other UI elements. The rest of your components can live independently (for the most part)
We have customized UI components we got from shadcn and now some use radix and some use base ui, and some have other dependencies or no dependencies at all. Properly tree shaken this is not a big deal at all and we can upgrade components individually as needed.
For boring applications this may be a bit much. But even then if you wait too long and mantine falls behind more than a couple versions, who knows how easy it would be to get your whole project up to date.
I wrote something about it a few years ago when shadcn was relatively new on the scene https://andrewingram.net/posts/recipe-kits-a-great-alternati...
I use Material UI for all my AI coded applications. Am I doing something wrong? What difference would Shadcnd even make in a world of Claude Code?
Isn’t either infinitely customizable via CSS? So what’s the difference?
Is it ever that simple?
If a component as basic as a button or a list view ever requires an “upgrade”, something is fundamentally wrong to begin with. HTML5, ARIA, etc. aren’t cutting edge technologies that the ecosystem still needs time to figure out. This should be pull once and forget.
Vendoring your components gives you the best of both worlds. You get a full component library but retain the ability to modify them as you want.
Your AI agent claim doesn't make any sense either. When upgrading normally your component just gets rewritten on disk. When switching from radix to base ui, a more comprehensive approach is needed.
When You're Ready to Migrate
You don't need to migrate. But if you want to, we built a skill for it:
pnpm dlx skills add shadcn/ui
Then ask your coding agent:
migrate accordion to base-ui
Thanks internet.