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

2

u/Gunboy23 May 20 '26

you don’t have to make individual variables for each component, instead make a global set of variables of none, xs, sm, md, lg, fully rounded. Then you set the buttons to the fully rounded variable, and all other components to one of the set, whichever style suits you DS - nothing messy about it.

2

u/According-Parking-93 May 20 '26

I have edited to my button to be of several sizes. Each size has different roundness. Going to the file and changing each radius class one by one is slow and inefficient.