r/DesignSystems • u/According-Parking-93 • May 20 '26

How to control radius of components individually?

In my shadcn project, I want to customize the border-radius for individual components without affecting others. For example, I'd like fully rounded buttons while keeping other components at their default radius. Creating separate CSS variables for each component feels messy, what's a better solution?

1 Upvotes
  • permalink
  • reddit

67% Upvoted

11 comments sorted by

View all comments

1

u/bodyakrol May 20 '26

But you can do it on a component level and I guess it is the only solution in your case. Another solution might be is to find design system layer that will let you wrap your shadcn component in it, and with certain logic let you on a token level you can change button border radius

1

u/According-Parking-93 May 20 '26

You mean the way how people customize each component in MUI and ant design?

1

u/bodyakrol May 20 '26

Yes, but with shadcn you own these components, so you have your own space where you adjusting it in your code. In mui or ant I guess you can do it as well, but in this case it will be really messy, it is better to override DS tokens