Which is the best approach to build on top of shadcn/ui?

[AndreaBarghigiani]

Hi all, I've been using this fantastic library for a while now, but I have always used it in side projects and little tools with a short lifespan.

Today, I would like to leverage it to build a new product for the company I am working in. I want to make the right decision that will keep the maintainability and the ease of use, and since I have not found discussions on this topic, I would like to discuss it with you.

On every "introductory video/article" you find around the web, it's obvious that having the component living in the ui/ folder of your codebase is appreciated. To be honest, this is what I like about it too, but the thing is that many developers talk about the fact that you can customize the component yourself to let it match the design you are working on.

The fact is that while this is a fine approach, you have to change the component that comes from the library, and it will break the diff command that you get from the CLI.

I know this is experimental, but I am trying to figure out the best approach to make it work. Right now, I see those different paths in front of me:

1. customize the component itself - by removing/adding the classes I need even if this will not keep the compatibility with diff
2. build my components on top of the shadcn/ui - this will let me customize them and keep the compatibility with the diff command, even though I believe I'll not be able to keep untouched all of them
3. don't use shadcn/ui at all - this will force me to use the Radix UI out of the box and "take inspiration" from the amazing work that shadcn has done here

From your experience, which approach would you take and why?

Thanks to anyone who will participate in this discussion.

[TJdhyani]

Need some love on this post.

[kresimir-coko]

I'm very curious about this myself. Not being able to style the button with an icon inside without overriding [&_svg]:size-4 is causing headaches.

I'd love to be able to customize some of the most commonly used components to match our styleguide so that they are as we want them by default.

Any thoughts, recommendations @shadcn ?

[AndreaBarghigiani]

Thank you guys for the interest, I'm back at this because I just saw a video where we are encouraged to override the styles of the component itself.

The thing is, and I tested right now with progress.tsx to be sure, that every time we use pnpm dlx shadcn@latest add [component], if such component is in our codebase the only option we have is to override it completely 🤔

I understand that we have a repository, and we can check the difference once we override that, but it's time-consuming.

Besides that, I've also noticed that we probably do not have the diff command anymore, and another issue that arise when we override the component we've customized is that we lose all the formatting preferences that we had in place.

That's why I was looking to find a proper way to extend the component we install/download from shadcn/ui.

Doing so will allow us to customize the components for our needs while updating them via CLI.

Any thought? I have to see if there are some open issues that will improve the situation.